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

我正试图使用ajax向服务器发送一个按钮id以提交表单，因为我不想每次单击按钮时都加载一个新页面。但它不起作用，我不知道为什么。它甚至不再改变x到x的按钮

顺便说一句，我对阿贾克斯很陌生

这是我的剧本：

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

var docFrag=document.createDocumentFragment（）；
对于（var i=0；i<3；i++）{
var行=document.createElement（“tr”）
对于（var j=0；j<3；j++）{
var elem=document.createElement（'BUTTON'）；
元素类型='按钮'；
元素id='r'+i+'s'+j；
元素值='r'+i+'s'+j；
elem.onclick=函数（）{
document.getElementById（“klik”）.value=this.id；
document.getElementById（“ID”）.value=this.ID；
//document.getElementById（“klik”）.submit（）；
$（“#klik”）.submit（函数（事件）{
event.preventDefault（）；//防止默认操作
var post_url=$（this.attr（“action”）；//获取表单操作url
var request_method=$（this.attr（“method”）；//获取表单get/POST方法
var form_data=new FormData（this）；//创建新的FormData对象
$.ajax({
url:post_url，
类型：请求\u方法，
数据：表格数据，
contentType:false，
cache:false，
processData:false
}).done（函数（响应）{
警报（“完成”）；
});
});
                 
var id=this.getAttribute（'id'）；
var novi=document.createElement（'BUTTON'）；
novi.type='按钮'；
                    
//警报（“此对象的ID属性设置为\”“+ID+“\”）
novi.value=id；
novi.innerHTML='x'；
this.parentElement.replaceChild（novi，this）；
                    }; 
elem.innerHTML=elem.value；
                 
文件附件（elem）；
            } 
文件.正文.附件（docFrag）；
document.body.appendChild（行）；
    } 

在发送ajax请求之前，需要添加X-request-With头

// 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')
    }
});

---

查看一下

你能解释一下beforeSend函数在这里到底做了什么吗？@Snowwy

beforeSend

在发送ajax之前被调用，主要用于设置自定义标题，更多信息你可以查看Jquery文档或查看一下

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