在 html 模板中发送响应而无需重新加载页面答案

【问题标题】：Send response in html templates without reload page在 html 模板中发送响应而无需重新加载页面
【发布时间】：2017-04-24 03:08:02
【问题描述】：

在我的 Django 项目中，我为所有客户提供了一个列表页面。在所有客户列表显示的那个页面上，我在那里有一个归档 is_active 。如果我单击更改状态按钮（客户列表页面的每一行都有一个更改状态按钮）is_active 字段变为假而不重新加载我的列表页面。当我再次单击更改状态按钮时它变为 True。请帮助我提供它的示例代码。我的listing页面如下-

<!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>

【问题讨论】：

标签： javascript html css ajax django

【解决方案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"),

然后在模板中定义一个 AJAX 调用，使用JQuery:

<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>

【讨论】：

Hello Messaoud。javascipt 功能是否完整，或者我必须写一些额外的东西。请帮助我，我不知道 ajax，所以当我编写你发送给我的确切代码时，我无法执行。跨度>
嗨@vikrantVerma，是的，您只需点击单选按钮check 或uncheck，我会更新我的答案
AttributeError at /customapi/vendor/active-customer/ 'bool' 对象没有属性 'save'
当我点击更改状态按钮时显示此错误
你已经写了consumar和customer in view。是不是拼写错误