數據未通過Ajax提交未提交

Question

這是 ajax 代碼

$('#form').on('提交', 函數(e){

        $.ajaxSetup({
            headers: {
                "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
            }
        });
        $.ajax({
             type : 'POST', 
             url: "{% url 'HealthTest' %}",
             data: {
              first_name : $('#first_name').val(),
              deparment : $('#deparment').val(),
              Reg_No : $('#Reg_No').val(),
              Health_status : $('#Health_status').val(),
              dataType: "json",
             },

             success: function(data){
                $('#output').html(data.msg) /* response message */
             },
      
             failure: function() {
             }
            });

});

這個表格代碼

{% csrf_token %}{{form.as_p}}

當我在我的頁面中按提交時，控制台中會彈出此錯誤消息 window在此處輸入圖片描述

我嘗試了不同的解決方案，但它對我不起作用。 我是新手在此先感謝。

Answer 1

首先配置urls.py：

from .views import functionpost

urlpatterns = [
    path('<url>', functionpost),
]

在 Python views.py 端：

from django.http import JsonResponse

def functionpost(self, request): 
    if request.method == 'POST':
        context = {'informations':{'info1': request.POST['information_1']}, 
                   'info2': request.POST['iformation_2']}
        return JsonResponse(context)

在 html 上，帖子 forms 是：

<form id="post-form" method="POST">

    {% csrf_token %}

    <div class="input-group form-group">
        <input type="text" class="form-control form-control-sm" 
         id="information_1">
    </div>

    <div class="input-group form-group">
        <input type="text" class="form-control form-control-sm" 
         id="information_2">
    </div>

    <button type="submit" class="main-btn">Button</button>
</form>

js:

$.ajax({
    type:'POST',
    url:"<intire_url>", 
    data: {
        information1:$('#information_1').val(),
        information2:$('#information_2').val(),
        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
        },
    success: function(data) {
        alert(data.informations['info1'] + data.informations['info2']);
        }
   });