无法发送“POST”表单，jQuery 不会检测到提交动作

Posted 2023-05-09

【中文标题】无法发送“POST”表单，jQuery 不会检测到提交动作

【英文标题】：Unable to send "POST" form, jQuery won't detect submit action

【发布时间】：2020-09-29 17:10:36

【问题描述】：

单击按钮后我无法发送表单，我怀疑 jQuery 无法检测到提交操作。它是 jQuery 检测到提交操作时发送的表单。我使用调试器将点击操作跟踪到 jquery.js (3.5.1)，如下所示。提交动作函数本身就是一个自定义的文件代码（下面我也会注明）。

在我使用 Mozilla 进行检查后，我发现 POST (xhr) : status、transferred 和 header 没有任何价值。

如果您知道如何解决此问题，请逐步解释。我将不胜感激

jQuery.js 事件监听器断点图像： Breakpoint 1

Breakpoint 2

自定义JS代码：

$(".submitForm").on("click", function() 
		var _this = $(this);
		var targetForm = _this.closest('form');
		var errroTarget = targetForm.find('.response');
		var check = checkRequire(targetForm , errroTarget);
		if(check == 0)
			var formDetail = new FormData(targetForm[0]);
			formDetail.append('form_type' , _this.attr('form-type'));
			$.ajax(
				method : 'post',
				url : 'ajax.php',
				data:formDetail,
				cache:false,
				contentType: false,
				processData: false
			).done(function(resp)
				if(resp == 1)
					targetForm.find('input').val('');
					targetForm.find('textarea').val('');
					errroTarget.html('<p style="color:green;">Mail has been sent successfully.</p>');
				else
					errroTarget.html('<p style="color:red;">Something went wrong please try again latter.</p>');
				
			);
		
	);

HTML 代码在这里：

<form>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <input type="text" name="full_name" placeholder="Full Name" class="require">
    <input type="text" name="email" placeholder="Email" class="require" data-valid="email" data-error="Email should be valid.">
    <input type="text" name="contact_no" placeholder="Phone" class="require">
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <textarea rows="7" name="message" placeholder="Message" class="require"></textarea>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="response"></div>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="wd_btn">
      <button type="button" class="submitForm" form-type="contact">Send a Message</button>
    </div>
  </div>
</form>

【问题讨论】：

请在sn-p中添加相关的HTML！

您很可能是从 HTML 提交表单，并加载了一个新页面。

您需要将 e.preventDefault 添加到您的 submitForm 按钮单击中 - 尚不清楚，但这很可能是 <button class='submitForm'>submit</button> 因此在您的单击处理程序运行后将继续提交表单。

我已按照您的要求更新了问题，非常感谢您的快速回复。

【参考方案1】：

我找到了解决问题的方法。事实证明，在最新的 Windows 10 更新之后出现了问题。它影响了我的 WAMP 软件，在我卸载 WAMP 服务器并安装最新的 XAMP 服务器版本后问题停止了。代码现在可以正常工作了。

当我找不到错误时，我开始发疯了。非常感谢所有回复的人。