無需重新加載頁面即可在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