form.serialize（）发送空对象-Django表单

Question

我的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发送AJAX请求到Django视图。 看起来像这样：

{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)命令确认的空对象 。 谁能帮我解决这个问题？

Answer 1

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

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

希望它会有所帮助。

最好的祝福，

哈蒂

Answer 2

像这样替换代码：

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())
        }
    });

});