簡單且有問題的雙格式 ajax 發布未觸發

Question

我確定我的代碼被破壞了，誰能告訴我在哪里？ 我不能使用相同的表格。 我嘗試了幾種方法將 2 POST forms 發送到操作頁面。 但是當單擊按鈕時，頁面會重新加載更新的地址欄（單擊提交表單上的 yname 按鈕，地址轉到 example.com/?yname 而不是 do.php 頁面）

請考慮以下示例：

 $("#sub").click(function(){ $("form").each(function(){ var fd = new FormData($(this)[0]); $.ajax({ type: "POST", url: "do.php", data: fd, processData: false, contentType: false, success: function(data,status) { //this will execute when form is submited without errors }, error: function(data, status) { //this will execute when get any error }, }); }); });

 <form id="form1"> <input type="tel" placeholder="Your Email" id="email" name="yemail" class="c"> <button id="sub"></button> </form> <form id="form2"> <input type="tel" placeholder="Your Name" id="name" name="yname" class="b"> <button id="sub"></button> </form>

tis 代碼的結果：單擊表單時，url 地址更新為？yname 為什么不觸發 do.php 頁面的操作？

Answer 1

#id不能重復。 請改用class 。
並且$(this).parent('form')行獲取每個單擊的.sub的形式。
按鈕應該是type="button" '因為默認情況下它將是type="submit"

類型

按鈕的默認行為。 可能的值為：
提交：
該按鈕將表單數據提交給服務器。 如果沒有為與 a 關聯的按鈕指定屬性，或者該屬性為空值或無效值，則這是默認值。
重置：
該按鈕將所有控件重置為其初始值，例如。 （這種行為往往會惹惱用戶。）
按鈕：
該按鈕沒有默認行為，默認按下時不執行任何操作。 它可以讓客戶端腳本監聽元素的事件，這些事件在事件發生時觸發。

文檔按鈕

已編輯：要以一種形式發送所有數據，只需刪除form2

 $(".sub").click(function(){ //This line is searching the correct form from itself. var fd = new FormData($(this).parent('form')[0]); $.ajax({ type: "POST", url: "do.php", data: fd, processData: false, contentType: false, success: function(data,status) { //this will execute when form is submited without errors }, error: function(data, status) { //this will execute when get any error } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form1"> <input type="tel" placeholder="Your Email" id="email" name="yemail" class="c"> <button type="button" class="sub"></button> <input type="tel" placeholder="Your Name" id="name" name="yname" class="b"> <button type="button" class="sub"></button> </form>