AJAX表單提交序列化

Question

我有一個簡單的表單，可以收集名字，姓氏和電子郵件。

該表單使用AJAX將數據提交到另一個站點。 提交表單時，名字和姓氏記錄不正確，而是以序列化格式重新出現。 電子郵件記錄良好。 我無法在計算機上復制該問題，但所有其他提交都存在相同的問題。

我懷疑serialize（）函數是罪魁禍首，因為表單所在的站點正在使用jQuery 1.11.1，但是文檔說它似乎從v1開始就支持該函數。

這是記錄在表單報告中的內容：

• 姓氏-5ad65afa9a4a6
• 名-5ad65afa9a465

• 電子郵件-foobar@gmail.com

   <form method="GET" action="https://www.mywebsite.org/submission-page" accept-charset="UTF-8" id="survey_5481"> <input class="form-control placeholder" required="required" placeholder="First Name" name="cons_first_name" id="cons_first_name" type="text"maxlength="50"> <input class="form-control placeholder" required="required" placeholder="Last Name" name="cons_last_name" id="cons_last_name" type="text" maxlength="50"> <input class="form-control placeholder" required="required" placeholder="E-mail" name="cons_email" id="cons_email" type="email" maxlength="255" pattern="[a-zA-Z0-9!#$%&amp;'*+\\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*"> <button type="submit" class="btn" name="submit" id="submit" value="Submit">Submit</button> </form> <div id="form-submit-message" style="display: none;padding: 15px;margin-bottom: 22px; color: white; font-size: 20px; text-align: center;">Thank you for joining!</div> <script type="text/javascript"> $(document).ready(function() { var form = $('#survey_5481'); form.on('submit',function(e) { $.ajax({ type: "GET", url: "https://www.mywebsite.org/submission-page", data: $(this).serialize() }).always(function(data){ $('#survey_5481').hide(); $("#form-submit-message").show(); }); return false; }); }); </script> 

Answer 1

嘗試這個：-

$("#survey_5481").submit(function(event){
event.preventDefault(); //prevent default action 
var post_url = $(this).attr("action"); //get form action url
var form_data = $(this).serialize(); //Encode form elements for submission

$.get( post_url, form_data, function( response ) {
  $("#form-submit-message").html( response );
});
});