javascript - 单击(图像/按钮)将数据存储在...中以实时呈现另一个 html 模板

Question

当在我的 (x.html) 模板中单击图像时，我想检索 img.id 或 img.alt 数据。然后，检索到的数据将用于填充另一个模板 (dashboard.html)。我唯一的问题是如何检索“onclick”事件的数据。一旦我将数据存储在某处，我将能够弄清楚如何根据该信息填充另一个模板。如果我补充说“dashboard.html”应该是一个实时统计仪表板，您的答案会改变吗？

我已经有以下工作 js 返回被点击图像的 id。例如，我如何在 views.py 中使用该数据？

function ImgDetails(img){
    var name = img.src;
    var id = img.id;
    console.log(id);
    }

在 html (x.html) 下方，我想在其中为通过 View 导入的每个图像添加一个 onclick 函数。

{% include 'navigation.html' %}

    <div id="Content">
        <div id="List-Content">
            <!--- All_Test  -->
                {% for key, value_list in Drank.items %}
                        <div id ="Content-List">
                            <div id ="Title-Box">
                                <h1 class="hero_header">{{ key }}</h1>
                            </div>
                            {% for value in value_list %}
                                <div id ="Menu-Item">
                                    <div id ="Menu-Item-Wrap">
                                        <img style="margin: 0 auto;" id="{{ value }}" src="{{ value }}">
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                {% endfor %}
            </div>
        </div>
    </div>

</div>
</body>

{% include 'footer.html' %}

这里是我的 views.py:

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
from django.template import loader
from django.db import models
from django.contrib.staticfiles.templatetags.staticfiles import static
import pandas as pd
import os
from os import walk
#C:\PythonProjects\DjangoApp\djangonautic
#C:/PythonProjects/DjangoApp/djangonautic

#Get dirs in imagefolder, files in dirs and create dictionairy for render
def smaakjes_list(request):
Temp_Directory_Path = []
#TempDic -> can later be replaced in the loop below, so that key                 values will be added as dir names
path_to_option_images =     '/Users/kolinmac/AnacondaProjects/DjangoApp/djangonautic/smaakjes/static/options/'
    #'/Users/kolinmac/AnacondaProjects/DjangoApp/djangonautic/smaakjes/static/options/'
super_dict = {}

#for each folder in options -> get all directory names
for (dirpath, dirnames, filenames) in walk(path_to_option_images):
    Temp_Directory_Path.extend(dirnames)
    print(Temp_Directory_Path)
    break


#for each directory in the list with directories
for dir_name in Temp_Directory_Path:
    #create path for file names - to iterate with walk()
    Temp_Path = path_to_option_images + dir_name
    #create title and dict - for later use
    Dict1 = {dir_name : []}
    super_dict_temp = {}
    TempList = []

    #for each image in path + dir_name
    for (dirpath, dirnames, filenames) in walk(Temp_Path):
        TempList.extend(filenames)
        break

    for values in TempList:
        #currently only .png allowed
        if values[-4:] == ".png":
            value = "/static/options/" + dir_name + "/" + values
            Dict1[dir_name].append(value)

    super_dict_temp = Dict1.copy()
    super_dict.update(super_dict_temp)


#print(super_dict)

return render(request, 'smaakjes/smaakjes.html', {'Drank': super_dict})

Answer 1

要检索数据，您将:
HTML:

<p id="malek" onclick="getAttribute(this)" >malek</p>

JS:

 function getAttribute(elem){
       //get an attribute value of the element
       idElement = elem.getAttribute('id');//src or howerver you want
    }
//then you should submit it with ajax request
var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/YourRouteHere");//here you paste the route where u can receive data
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({src:idElement})); //And here ur data in Json Format