无法发送 "POST" 表单,jQuery 不会检测到提交操作
Unable to send "POST" form, jQuery won't detect submit action
单击按钮后我无法发送表单,我怀疑 jQuery 无法检测到提交操作。它是在 jQuery 检测到提交操作时发送的表单。我使用调试器将单击操作跟踪到 jquery.js (3.5.1),如下所示。 submit action函数本身就是一个自定义的文件代码(下面我也会注明)
在我使用 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>
我找到了解决问题的方法。原来是最新的windows10更新后出现的问题。它影响了我的 WAMP 软件,在我卸载 WAMP 服务器并安装最新的 XAMP 服务器版本后问题停止了。该代码现在工作正常。
当我找不到错误时,我开始发疯了。非常感谢所有回复的人。
单击按钮后我无法发送表单,我怀疑 jQuery 无法检测到提交操作。它是在 jQuery 检测到提交操作时发送的表单。我使用调试器将单击操作跟踪到 jquery.js (3.5.1),如下所示。 submit action函数本身就是一个自定义的文件代码(下面我也会注明)
在我使用 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>
我找到了解决问题的方法。原来是最新的windows10更新后出现的问题。它影响了我的 WAMP 软件,在我卸载 WAMP 服务器并安装最新的 XAMP 服务器版本后问题停止了。该代码现在工作正常。
当我找不到错误时,我开始发疯了。非常感谢所有回复的人。