form.serialize() 发送空对象 - Django 表单答案

【问题标题】：form.serialize() sends empty object - Django formsform.serialize() 发送空对象 - Django 表单
【发布时间】：2018-01-07 18:47:29
【问题描述】：

我的 AJAX 查询发送一个空对象 Object { } 按钮点击 - 它应该发送表单数据。

我有一个带有复选框的表单。它渲染和函数，HTML是这样的：

<form method="post" action="" data-id="filter-form">

//This is from Django's CSRF token
<form  method="post" >
<input type='hidden' name='csrfmiddlewaretoken' value=.../>

<div class="form-group"> <div id="div_id_vacant" class="checkbox"> 
  <label for="id_vacant" class="">Is Vacant</label>
  <input type="checkbox" name="vacant" class="checkboxinput" id="id_vacant" />
</div></div>

...more of the same inputs...

</form>
</form>

<hr/>

<button id="search-btn" class="btn btn-info" data-filter-leads-url="/leads/ajax/filter">Search</button>
<button id="download-btn" class="btn btn-default" data-filter-leads-url="/leads/csv">Download</button>

我也有一些 JQuery 的东西。应该读取表单并通过 post 向 Django 视图发送 AJAX 请求。它看起来像这样：

{Django CSRF code here}

var searchBtn = $("#search-btn");
searchBtn.click(function () {
    var form = $("#filter-form");

    $.ajax({
        url: searchBtn.attr("data-filter-leads-url"),
        method: "POST",
        data: form.serialize(),
        dataType: 'json',
        success: function (data) {
            console.log(data)
        },
        error: function (data) {
            console.log("There was an error.");
            console.log(data.error())
        }
    });

});

我也试过了：

var formData = new FormData(form[0]);

它也发送一个空对象。

空对象通过 Django 视图打印request.POST 和console.log(form.serlialize()) 命令以及console.log(formData) 命令确认。谁能帮我解决这个问题？

【问题讨论】：

你不能嵌套<form>元素。
:-) Django 正在做这个魔术......它正在工作！

标签： javascript jquery ajax django forms

【解决方案1】：

像这样替换你的代码：

HTML：

<form method="post" action="" data-id="filter-form" id="filter-form">
//This is from Django's CSRF token
<input type='hidden' name='csrfmiddlewaretoken' value=.../>

<div class="form-group"> <div id="div_id_vacant" class="checkbox"> 
  <label for="id_vacant" class="">Is Vacant</label>
  <input type="checkbox" name="vacant" class="checkboxinput" id="id_vacant" />
</div></div>

...more of the same inputs...

</form>

<hr/>

<button id="search-btn" class="btn btn-info" data-filter-leads-url="/leads/ajax/filter">Search</button>
<button id="download-btn" class="btn btn-default" data-filter-leads-url="/leads/csv">Download</button>

jQuery：

{Django CSRF code here}

var searchBtn = $("#search-btn");
searchBtn.click(function () {
    var form = $("#filter-form");
    $.ajax({
        url: searchBtn.attr("data-filter-leads-url"),
        method: "POST",
        data: form.serialize(),
        dataType: 'json',
        success: function (data) {
            console.log(data)
        },
        error: function (data) {
            console.log("There was an error.");
            console.log(data.error())
        }
    });

});

【讨论】：

【解决方案2】：

您的表单正在使用 data-id，请在其中添加 id 并重试。

<form method="post" action="" data-id="filter-form" id='filter-form'>

希望对您有所帮助。

最好的问候，

哈杰

【讨论】：

不建议在累了的时候编码。谢谢！