Django + JQuery获取表单中的数据 + Ajax 发送数据

谁借莪１个温暖的怀抱￠ 2022-12-10 15:56 200阅读 0赞

（注意表单中都得带csrf\_token）  
1.方法一：通过Jquery`$("#对应form表单id).serializeArray()`获取表单数据，直接赋值给`$.ajax中的`data。

.serializeArray()方法参见[jQuery ajax - serializeArray() 方法][jQuery ajax - serializeArray_]  
该方法放回一个JSON对象数组。

$("#postSubmit").click(function () { 
                        let data = $("#postContent").serializeArray();
                        $.ajax({ 
                            url: '/decuhub/home-post-ajax',
                            method: 'POST',
                            data: data,
                            async: true,
                            success: function (result) { 
                                console.log("post successfully!")
                            }
                        })
                    })

2.方法二：通过`$("#对应form表单id).serializer()`获取表单数据：

$("#postSubmit").click(function () { 
                        let data = $("#postContent").serializer();
                        $.ajax({ 
                            url: '/decuhub/home-post-ajax',
                            method: 'POST',
                            data: data,
                            async: true,
                            success: function (result) { 
                                console.log("post successfully!")
                            }
                        })
                    })

3.方法三：不推荐

$("#postSubmit").click(function () { 
                        let postContentForm = $("#postContent").serializeArray();
                        let data = { };
                        $.each(postContentForm, function(){ 
                            data[this.name] = this.value;
                        })
                        $.ajax({ 
                            url: '/decuhub/home-post-ajax',
                            method: 'POST',
                            data: data,
                            async: true,
                            success: function (result) { 
                                console.log("post successfully!")
                            }
                        })
                    })

这种方法参见别人博客，也可，但是不推荐，`$.each()`方法参考[jQuery.each()方法][jQuery.each]

Django的`request.post`获取到的值是

<QueryDict: {'csrfmiddlewaretoken': ['vO34OFZtTj2Bp2ARMlXVJxZQb37CyuWR7ywaDC4QaJhHtcxB4xB9fnb2IOnbQ2AR'], 'content': ['asdfsd']}>

[jQuery ajax - serializeArray_]: https://www.w3school.com.cn/jquery/ajax_serializearray.asp
[jQuery.each]: https://www.runoob.com/jquery/misc_each.html