Question

我正在使用django和python，我的目标是能够进行某种类型的python函数调用（不刷新页面）以基于onclick事件显示不同的信息。

下面的一些通用代码显示了我的设置。本质上，当单击parent2内的按钮时，我希望能够使用该按钮id向某个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将是提到的按钮ID ...

然后，将其添加到您的urls.py

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

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

现在，您可以在JavaScript代码中使用AJAX调用此函数，这样您就可以像在<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是您的按钮ID。并且您会收到一个响应，格式为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'])
    }
  });
}

需要代码方法/推荐[python，django，html]

1 个答案: