Нужен код подход / рекомендация [python, django, html]

Question

Я работаю с django и python, и моя цель состоит в том, чтобы иметь возможность выполнять какой-либо вызов функции Python (без обновления страницы) для отображения различной информации, основанной на событиях onclick.

Ниже показан некоторый общий код ниже.мои настройки.По сути, когда нажимается кнопка внутри parent2, я хочу иметь возможность вызывать функцию с этим идентификатором кнопки для некоторой функции python.Затем я хочу перерисовать часть страницы, чтобы отобразить результаты в parent1.

Я не уверен, насколько это реалистично, но буду признателен за любую помощь в правильном направлении.

<div id="parent1">
    <div class="child_style">
        {%for i in mydata1%}
            <div> my child 0</div>
            ...
        {% endfor %}
    </div>
</div>
<div id = "parent2">
    <div class="other_style">
        {%for j in mydata2%}
            <div><div><div><div><a id="..">Button0</a></div></div></div></div>
            ...
        {% endfor %}
    </div>
</div>

Answer 1

добавьте эту функцию к вашим views.py

from django.http import HttpResponse

@api_view(["GET" , "POST"])

def demo(request):

  buttonId=request.GET.get('button-id',None)
  return HttpResponse(json.dumps({"result":"you have clicked the button"+buttonId}))

Здесь buttonId будет упомянутым идентификатором кнопки ...

, затем добавьте это в свой urls.py

from django.urls import re_path
#import views.py file as view

urlpatterns = [
re_path(r'^demo$', view.demo,name='demo'),
]

Теперь, вы можете вызвать эту функцию, используя AJAX в вашем коде JavaScript, таким образом, вы получите ответ, который можно обновить в <div id="parent1"> следующим образом:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$.ajax({
        url: '/demo',
        data: JSON.stringify({'button-id':'demo-button'}),
        dataType: 'json',
        contentType: "application/json",
        success: function (data) {
            console.log(data['result'])
        }
    });
</script>

Здесь,вы передаете объект JSON {'button-id':'demo-button'} в запросе, где demo-button - это идентификатор вашей кнопки.и вы получите ответ в виде JSON {"result":"you have clicked the demo-button"}, в котором вы можете получить значение, вызвав data['result'].

. Вы можете заменить console.log(data['result'] своими собственными функциями

Обратите внимание: вам следует изменитьВаш <a> тег ... вместо этого вы можете использовать <button> с onClick слушателем событий .. как

<div><div><div><div><button id="some_id" onClick="myFunc(this.id);">Button</button></div></div></div></div>

, где myFunc() - это ...

function myFunc(id){
  $.ajax({
    url: '/demo',
    data: JSON.stringify({'button-id':id}),
    dataType: 'json',
    contentType: "application/json",
    success: function (data) {
      console.log(data['result'])
    }
  });
}