javascript - 如何使用ajax向服务器提交表单？

Question

我正在尝试使用ajax将按钮ID发送到我的服务器来提交表单，因为我不想每次单击按钮时都加载新页面。但它不起作用，我不知道为什么。它甚至不再将按钮 thex 更改为“x”。

顺便说一句，我对 ajax 很陌生

这是我的脚本:

<script> 
    var docFrag = document.createDocumentFragment();
    for (var i=0; i < 3 ; i++){ 
        var row = document.createElement("tr") 
        for (var j=0; j < 3 ; j++){ 
                 var elem = document.createElement('BUTTON');
                 elem.type = 'button';
                 elem.id = 'r'+i+'s'+j;
                 elem.value = 'r'+i+'s'+j;
                 elem.onclick = function () { 
                    document.getElementById("klik").value = this.id;
                    document.getElementById("ID").value = this.id;
                    //document.getElementById("klik").submit();

                    $("#klik").submit(function(event){
                        event.preventDefault(); //prevent default action 
                        var post_url = $(this).attr("action"); //get form action url
                        var request_method = $(this).attr("method"); //get form GET/POST method
                        var form_data = new FormData(this); //Creates new FormData object
                        $.ajax({
                            url : post_url,
                            type: request_method,
                            data : form_data,
                            contentType: false,
                            cache: false,
                            processData:false
                        }).done(function(response){ 
                            alert('Done');
                        });
                    });

                 
                    var id = this.getAttribute('id'); 
                    var novi = document.createElement('BUTTON'); 
                    novi.type = 'button'; 
                    
                    //alert("This object's ID attribute is set to \"" + id + "\".") 
                    novi.value = id; 
                    novi.innerHTML = 'x'; 
                    this.parentElement.replaceChild(novi,this); 
                    }; 
                 elem.innerHTML = elem.value; 
                 
                 docFrag.appendChild(elem); 
            } 
        document.body.appendChild(docFrag); 
        document.body.appendChild(row); 
    } 
</script>

Answer 1

在发送ajax请求之前，您需要添加X-requested-With header 。

// you can omit  this if you use @csrf_exempt decorator in your views
data['csrfmiddlewaretoken'] = '{{ csrf_token }}';

$.ajax({
    type: "POST",
    // Django use X-requested-With header to identify Ajax
    beforeSend: function (xhr) {
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    },
    url: "{% url '<your_view_name>' %}",
    data: data,
    success: function (data) {
         console.log('success')
    }
});

在您的 View 中，您可以简单地使用以下命令来检测请求是否是ajax:

def your_view(request):
    if request.is_ajax() and request.POST:
        print(request.POST)
        # process the data

看看 Docs for ajax