简单且有问题的双格式 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>