无需重新加载页面即可在html模板中发送响应

Question

在我的Django项目中，我有一个所有客户的列表页面。 在该页面上，所有客户列表显示，我在那里提交了is_active。 我如果点击更改状态按钮（客户列表页面的每一行都有一个更改状态按钮）is_active字段变为false而不重新加载我的列表页面。当我再次clcik on change status按钮时，它变为True.Please帮助我给一个它的示例代码。 我的上市页面如下 -

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>
<form id="myform"  method = "POST" action="#">
<table>
  <tr>
    <th>Name</th>
    <th>Location</th>
    <th>quantity</th>
    <th>time</th>
    <th>fb_id</th>
    <th>contact_number</th>
    <th>is_active</th>
    <th>Action</th>

  </tr>
  {% for lead in leads %}
  <tr>
    <td>{{lead.customer_name}}</td>
    <td>{{lead.location}}</td>  
    <td>{{lead.quantity}}</td>
    <td>{{lead.time_requirement}}</td>
    <td>{{lead.fb_id}}</td>
    <td>{{lead.contact_number}}</td>
    <td>
        {%  if lead.is_active %}
        <input type="radio" value="" checked>
        {% else %}
        <input type="radio" value="" >
        {% endif %}
        <button name="button" value="OK" type="button" >change status</button>

        </td>
    <td><button name="button" value="OK" type="button" align="middle"><a href="/customapi/vendor/detail-customer-leads/?lead_id={{lead.id}}">Edit</a></button>
    </td>



  </tr>
  {% endfor %}

</table>
</form>


</body>
</html>

Answer 1

你可以用usnig AJAX来做这件事

您需要定义AJAX视图的所有内容：

from .model import Customer# import here your model
from django.http.response import JsonResponse
from django.shortcuts import get_object_or_404


def ajax_view(request):
    results = {}
    if request.method == 'POST':
        pk = request.POST.get('pk',None)
        if pk:
            customer = get_object_or_404(Customer, id=pk)
            results['code'] = 200
            if customer.is_active:
                customer.is_active = False 
                results['status'] = 'inactive'
            else:
                customer.is_active = True
                results['status'] = 'active'
            customer.save()
        else:
            results['code'] = 404
    else:
        results['code'] = 500
    return JsonResponse(results)

然后在urls.py创建一个新的url：

url(r'^activeConsumer$', views.ajax_view, name ="active_consumer"),

在您的模板中，您使用JQuery定义一个AJAX调用：

<script>
 function active_consumer(id) {
   //AJAX DATA
    //you have to send data to server
    // first you have to get the id of the consumer
    // second you have to pass `csrfmiddlewaretoken` with data 
   data = {
     'pk':id,
     'csrfmiddlewaretoken' : '{{csrf_token}}' };

    //AJAX CALL
    $.post( "{% url 'active_consumer' %}", data).done(function(response) {
        if (response.code == 200) {
            if (response.status == "active") {
                 //here you have to change the status of the consumer to active in HTML
             }
             else {
                 //here you have to change the status of the consumer to inactive in HTML
             }
            }
        });
      }
</script>

在您的HTML中，您调用javascript函数active_consumer ：

<button name="button" value="OK" type="button" onclick="active_consumer({{lead.id}})" >change status</button>

更新：

要选中或取消选中单选按钮，您必须为其指定一个id ：

{%  if lead.is_active %}
<input id="myradio" type="radio" value="" checked>
{% else %}
<input id="myradio" type="radio" value="" >
{% endif %}

要使用JQuery检查单选按钮：

$("#myradio").prop("checked", true)

要取消选中它：

$("#myradio").prop("checked", false)

所以javascript函数将是这样的：

<script>
 function active_consumer(id) {
   data = {
     'pk':id,
     'csrfmiddlewaretoken' : '{{csrf_token}}' };


    $.post( "{% url 'active_consumer' %}", data).done(function(response) {
        if (response.code == 200) {
            if (response.status == "active") {
                 //uncheck the radio button
                 $("#myradio").prop("checked", false)  
             }
             else {
                 //check the radio button
                 $("#myradio").prop("checked", true)
             }
            }
        });
      }
</script>

无需重新加载页面即可在html模板中发送响应

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-12-08 20:30:09

无需重新加载页面即可在html模板中发送响应

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-12-08 20:30:09

解决方案1
2 已采纳 2016-12-08 20:30:09