當我嘗試在 django mvt 中使用 $.ajax 時，它無法正常工作，甚至沒有顯示錯誤

Question

這是視圖部分

class ApproveExpense(View):
    def post(self,request,id):
        csrf_token = get_token(request)
        select_expense= get_object_or_404(ExpensePortal,id=id)
        status_value = request.POST.get("a")
        print(status_value)
        if status_value == 'Accept':
            select_expense.status = True
            select_expense.save()
        else:
            pass

        return JsonResponse({'message':"Expense Approved"}, status=200)

這是模板代碼

{% extends "base.html" %}
{% load static %}
{% block body %}


<table>
    <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Amount</th>
        <th>Remarks</th>
        <th>Bill</th>
        <th>Download</th>
        <th>Status</th>
    </tr>

    {% for i in detail %}
    <tr>
        <td>{{ i.date }}</td>
        <td>{{ i.description }}</td>
        <td>{{ i.amount }}</td>
        <td>{{ i.remarks }}</td>
        <td><img src = "{{ MEDIA_URL }}{{i.bill.url}}" alt="Expense-bill" width="50" height="50"></td>
        <td><a href= "{% url 'users:download1' i.bill %}"><img src="{% static 'assets/img/flat.png' %}"height="33"width="50"></a></td>
        {% if current_user.user_type == 'ADMIN' or current_user.user_type == 'ACCOUNTS'  %}
        <td><button id="st" value="Accept" data-catid="{{ i.id }}">App</button>&nbsp;<button id="st1" name="b" onclick="Reject()" value="Reject" data-catid="{{ i.id }}">Reject</button></td>
        {% elif i.status == True %}
        <td style="color:green;">Approved</td>
        {% elif i.status == False %}
        <td style="color:red;">Rejected</td>
        {% else %}
        <td style="color:purple;">Pending</td>
        {% endif %}


    </tr>

    {% endfor %}
        <tr style="margin-top:60px">
           <td colspan ="2"><h3>Total</h3></td><td colspan="4" style="text-align:left;padding:40px"><h4>{{ total }}</h4></td>
       </tr>
   </table>

</table>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var catid = document.getElementById('st1').getAttribute("data-catid")
var csrf = document.cookie.match("csrftoken").input.split('=')[1]
var current_value = document.getElementById('st1').value
      $("#st").click(function() {


        $.ajax(
        {
        url:  '/approve/'+catid,
        headers:{'X-CSRFToken':csrf},
        type:  'POST',
        data:{'a',current_value},
        success: function(data) {
        console.log(data)

        }
        })
      });
});

</script>

Answer 1

最后我找到了我切換到 XMLHttpRequest 的解決方案這里是視圖和模板的修改

這是查看代碼

class ApproveExpense(View):
    def post(self,request,id):
        csrf_token = get_token(request)
        select_expense= get_object_or_404(ExpensePortal,id=id)
        status_value = json.loads(request.body)
        print(status_value["current_value"])
        if status_value["current_value"] == 'Accept':
            select_expense.status = True
            select_expense.save()
        else:
            pass

        return JsonResponse({'message':"Expense Approved"}, status=200)

這是模板代碼

<table>
    <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Amount</th>
        <th>Remarks</th>
        <th>Bill</th>
        <th>Download</th>
        <th>Status</th>
    </tr>

    {% for i in detail %}
    <tr>
        <td>{{ i.date }}</td>
        <td>{{ i.description }}</td>
        <td>{{ i.amount }}</td>
        <td>{{ i.remarks }}</td>
        <td><img src = "{{ MEDIA_URL }}{{i.bill.url}}" alt="Expense-bill" width="50" height="50"></td>
        <td><a href= "{% url 'users:download1' i.bill %}"><img src="{% static 'assets/img/flat.png' %}"height="33"width="50"></a></td>
        {% if current_user.user_type == 'ADMIN' or current_user.user_type == 'ACCOUNTS'  %}
        <td><button onclick="approve()" id="st" value="Accept" data-catid="{{ i.id }}">App</button>&nbsp;<button id="st1" onclick="reject()" value="Reject" data-catid="{{ i.id }}">Reject</button></td>
        {% elif i.status == True %}
        <td style="color:green;">Approved</td>
        {% elif i.status == False %}
        <td style="color:red;">Rejected</td>
        {% else %}
        <td style="color:purple;">Pending</td>
        {% endif %}


    </tr>

    {% endfor %}
        <tr style="margin-top:60px">
           <td colspan ="2"><h3>Total</h3></td><td colspan="4" style="text-align:left;padding:40px"><h4>{{ total }}</h4></td>
       </tr>
   </table>

</table>
</script>
<script>
function approve(){
var catid = document.getElementById('st').getAttribute("data-catid")
var csrf = document.cookie.match("csrftoken").input.split('=')[1]
var current_value = document.getElementById('st').value
var xhr = new XMLHttpRequest();
var url = '/approve/'+catid+'/'
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("X-CSRFToken", csrf);
xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {


                    }
                };
                     var data = JSON.stringify({ current_value

                });

                xhr.send(data);
                }
</script>