Javascript 阻止基于 ajax 响应的提交
Javascript preventing submit based on ajax response
我不明白为什么这段代码不会阻止提交。所有 html 都正确链接。所有警报都按预期显示。 我似乎并没有失去对事件的范围。任何建议,修复或解释都会很棒!
//Alert the potential customer if the email entered already exists.
function emailUniqueness() {
// When the Submit Button is clicked, then execute the following function...
$('#form').submit(function(event) {
//Remove error messages if they exist
$("#emailNotUniqueErr").empty();
$("#emailNotUniqueErr").removeClass('alert alert-warning');
//Make the call to servlet method
$.ajax({
url: 'http://localhost:8080/ShoppingCart/ajax.do',
success: function(response) {
searchForEmail(response, event);
}
});
//event.preventDefault(); works when placed here but is pointless.
});
}
function searchForEmail(response, event) {
//alert returns type "submit"
alert(event.type);
var emailEntry = $("#email").val();
var emailExists = false;
$.each(response, function(index, item) {
if(emailEntry == item.email) {
//Set to true when a match is found
emailExists = true;
//Exit the .each loop
return false;
}
});
//alert returns appropriate true or false for input entry
alert(emailExists);
if(emailExists) {
//still is type submit
alert(event.type);
//Properly print the warning if email exists
$("#emailNotUniqueErr").addClass('alert alert-warning col-sm-offset-2');
$('<a href="#" class="close" data-dismiss="alert">×</a>').appendTo("#emailNotUniqueErr");
$('<strong>Warning! Account already exists. One account per Email.</strong>').appendTo("#emailNotUniqueErr");
//does not prevent submit???
event.preventDefault();
} else {
//No match found allow submit, remove errors
$("#emailNotUniqueErr").empty();
$("#emailNotUniqueErr").removeClass('alert alert-warning');
return true;
}
}
ajax
调用是异步的。因此,行searchForEmail(response, event);
的执行会有一些延迟(当请求响应时)。执行时,表单已提交。执行顺序如下。
- 调用函数
emailUniqueness()
并开始执行函数 - 发送
ajax
请求,计划在响应到来后执行回调 - 函数
emailUniqueness()
函数执行结束 - 表单提交
ajax
请求的响应来了,执行了回调,searchForEmail(response, event);
被调用-
event.preventDefault()
被调用(在提交表单后调用)
您必须在函数中调用event.preventDefault();
emailUniqueness()
该方法,这会将顺序更改为以下内容。
- 调用函数
emailUniqueness()
并开始执行函数 - 发送
ajax
请求,计划在响应到来后执行回调 - 调用
event.preventDefault()
(这会阻止表单提交) - 函数
emailUniqueness()
执行结束 ajax
请求的响应来了,执行了回调,searchForEmail(response, event)
被调用
作为解决方案,
- 阻止在函数
emailUniqueness
内提交表单 - 提交带有
$('#form').submit()
的表单searchForEmail
函数。
相关文章:
- 如何使用jQuery/Ajax响应特定的提交按钮
- 处理evaluate()中提交的响应
- 引导表单向导 - 防止在提交 ajax 响应的每个页面表单出现错误时滚动到下一步
- Javascript 阻止基于 ajax 响应的提交
- 提交表单时在弹出窗口中打开响应
- 使用php提交表单,并使用ajax向用户提供响应
- 使用AJAX提交登录表单并获得响应
- 如何等待用户对Meteor AutoForm提交的响应
- 在 ruby 中自动填写、提交和审查 JavaScript 表单的响应
- 我可以将表单提交的响应设置为对话框的内容吗?
- 从表单提交获取 JSON 响应
- Ajax 表单提交有效,但没有响应
- 在铁表单提交后检查服务器响应
- 如何获取提交表单的 Iframe 的响应
- 在响应文件下载时重新启用表单提交按钮
- ExtJS中提交的响应有问题(JSON中的响应,但HTML输入的地方)
- ExtJS 5中表单提交的XML响应出错
- JavaScript提交按钮,从springMVC返回对象响应
- 从 Ajax 响应提交表单
- 根据ajax响应提交表单