表单提交使用带有按钮类型的jquery ajax而不是提交类型

Question

我需要使用FormData（）提交表单，但是在表单中我使用的按钮type="button"而不是type =“ submit”，这将刷新页面。 我试图在Google上搜索解决方案，但到目前为止找不到正确的答案或明确的答案。 我将发布一个包含3个输入的简单表单，如果我想做更大的事情，请从这里开始。 当我var_dump[$_POST]我得到空array[0]{}请帮忙。

 $("#discussion_submit_button").on("click", function(e){ //$("#discussion_form").submit(function(e){ e.preventDefault(); var title = $("#discussion_title").val(); var discussion = $("#discussion_input_textarea").val(); if (title == '' || discussion == '') { $(".discussion_label_arrow, .discussion_required_fields").fadeIn("Slow"); // error message, we select span tag with ID error_message and we change its content to this text setTimeout(function(){ $('.discussion_label_arrow, .discussion_required_fields').fadeOut("Slow"); }, 2000); } else { var formData = new FormData(this); alert(formData); $.ajax({ url: "widgets/discussion_board_submit.php", method: "POST", cache: false, processData: false, contentType: false, data: formData, success:function(data){ //alert(data); } }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action="" class="discussion_form" id="discussion_form"> <div class="discussion_label_div"><span class="discussion_label_span">Title</span><span class="discussion_label_arrow"><span></div> <div class="discussion_input_div"><input type="text" name="discussion_title" class="discussion_input" size="50" id="discussion_title"/></div> <div class="discussion_label_div"><span class="discussion_label_span">Subject</span><span class="discussion_label_arrow"><span></div> <div class="discussion_label_div"><span class="discussion_label_span">Discussion</span><span class="discussion_label_arrow"><span></div> <textarea rows="5" cols="50" name="discussion_textarea" class="discussion_input_textarea" placeholder="Open your discussion..." id="discussion_input_textarea"></textarea> <input type="button" name="discussion_submit_button" value="Assert" class="share_button" id="discussion_submit_button"/> </form> 

这是我的php：

var_dump($_POST);

Answer 1

与其使用javascript验证表单，不如将required属性添加到不能为空的字段中。

如果愿意，可以使用:invalid等CSS样式来设置样式
用户将专注于错误的第一个元素，并且在尝试提交时可以对其进行更正。
但这不会发生，除非触发了button.onclick事件，如果您使用button.onclick或type="button"并阻止了流程，则不会发生。 那就是你的错误。

当您构造formdata时，参数变为按钮元素，而不是FormData要求的形式

new FormData(this); // <-- `this` is a button elm in your case

---

因此，当您使用约束验证时 ，只有所有字段均有效时，submit事件才会被触发。 因此，您在提交事件上将始终具有有效的表单，并且this表单将被引用为FormData所需的form元素

所以这是我应该做的：

 function form2ajax(evt) { evt.preventDefault(); var formData = new FormData(this); // Having html define the markup // makes you able to reuse this function // for other forms $.ajax({ url: this.action, method: this.method, cache: false, processData: false, contentType: false, data: formData, success: function(data) { //alert(data); } }); // Just Another solution to submit the form... // fetch(this.action, {method: this.method, body: formData}) // .then(res => res.text()) // .then(console.log) } $("#discussion_form").submit(form2ajax) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action="widgets/discussion_board_submit.php" class="discussion_form" id="discussion_form"> <div class="discussion_label_div"> <span class="discussion_label_span">Title</span> <span class="discussion_label_arrow"><span> <!-- note missing / in span --> </div> <div class="discussion_input_div"> <!-- note required attribute --> <input type="text" required name="discussion_title" class="discussion_input" size="50" id="discussion_title"/> </div> <div class="discussion_label_div"> <span class="discussion_label_span">Subject</span> <span class="discussion_label_arrow"><span> <!-- note missing / in span --> </div> <div class="discussion_label_div"> <span class="discussion_label_span">Discussion</span> <span class="discussion_label_arrow"><span> <!-- note missing / in span --> </div> <!-- note required attribute --> <textarea required rows="5" cols="50" name="discussion_textarea" class="discussion_input_textarea" placeholder="Open your discussion..." id="discussion_input_textarea"></textarea> <!-- note using type=submit instead of type=button --> <!-- type=button don't trigger a submit --> <input type="submit" name="discussion_submit_button" value="Assert" class="share_button" id="discussion_submit_button"/> </form> 

Answer 2

问题是，你通过这 FORMDATA构造，但它需要的表单元素来初始化对象。

你可以这样做：

var formData = new FormData(this.form);

或者只是从DOM中选择表单：

var formData = new FormData($("#discussion_form")[0]);

---

只要记住您必须将HTMLFormElement传递给FormData ，就不能使用jQuery对象。 这就是为什么我从jQuery数组中选择第一个元素的原因。