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のものがあります。 と書いてあり、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]); 

それだけでなく、空のオブジェクトを送信します。 request.POST印刷 Djangoのビューとconsole.log(form.serlialize())コマンドならびにconsole.log(formData)コマンドにより確認

空のオブジェクト。誰も私がこれを解決するのを助けることができます

Answer 1

あなたのフォームはdata-idを使用していますが、そのフォームにIDを追加してもう一度やり直してください。

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

うまくいけば助けてください。

よろしく、

Hatjhie

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

});