При нажатии (изображение / кнопка) сохраните данные в ... для рендеринга другого HTML-шаблона.

Question

Я хотел бы получить данные img.id или img.alt при нажатии на изображение в моем (x.html) шаблоне.Затем полученные данные будут использованы для заполнения другого шаблона (dashboard.html).Мой единственный вопрос - как получить данные о событии onclick.Как только у меня будут храниться данные, я смогу выяснить, как заполнить другой шаблон на основе этой информации.И изменится ли ваш ответ, если я добавлю, что 'dashboard.html' должен быть живой панелью статистики.

У меня уже есть следующие рабочие js, которые возвращают идентификатор кликаемого изображения.Как я могу использовать эти данные в views.py, например?

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

Ниже HTML (x.html), в котором я хотел бы добавить функцию 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

Answer 2

Я нашел решение в разных постах.Также спасибо @Conan за указание в правильном направлении.У меня работал следующий код json:

function PostImageDetails(element) {
    var imageSrc = element.src;
    var imageId = element.id;
    console.log(imageSrc);
    console.log(imageId);

    //String manipulate ID
    imageId = imageId.split("/");
    imageId = imageId[4];
    imageId = imageId.split(".");
    imageId = imageId[0];
    imageId = imageId.replace(/[^a-zA-Z ]/g, "");

    console.log(imageId);
    //CREATE HTTP REQUEST
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "/api/users/", true);
    xmlhttp.setRequestHeader("X-CSRFTOKEN", getCookie('csrftoken')); //HTTP_X_CSRFTOKEN
    xmlhttp.setRequestHeader("Content-Type", "application/json");
    xmlhttp.send(JSON.stringify({'url':imageSrc, 'username': imageId}))

    //GET THE RESPONSE FROM THE SERVER
    xmlhttp.onload = function(){
        var csrftoken = getCookie('csrftoken');
        console.log(csrftoken);
        console.log(xmlhttp.status);
        console.log(xmlhttp.statusText);
        console.log(xmlhttp.responseText);
        console.log(xmlhttp);
    };
}
    //Create Cookie/Token
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}