javascript - 以 onsubmit 形式调用 ajax 函数
问题描述
我正在使用 html 表单并使用 php 来提交这个,但是在提交之前我想使用 ajax 方法来验证和检查响应,如果响应为 true,则返回 true,否则返回 false,所以直到检查响应 html 表单不应该被提交但不检查响应即使我使用了return,也可以提交提交
<form method="POST" action="<?= base_url('save_details/')?>" onsubmit="return validate()">
<button type="submit">Add</button>
</form>
脚本
function validate(){
$.ajax({
type: "POST",
url: "<?= base_url('validate_email') ?>",
data: {
email: email,
},
dataType: 'json',
success: function (response)
{
if (response.status) {
return true;
} else {
return false;
// some message
}
}
});
}
解决方案
您遇到的第一个问题是您需要阻止标准表单提交,以便您的逻辑在允许发送请求之前等待 AJAX 请求。为此,您可以使用不显眼的事件处理程序。理想情况下,这些应该始终用于on*
HTML 中的内联事件属性,因为后者不再是好的做法。
第二个问题是由于异步请求,您的return
语句实际上不会提供对validate()
调用的响应。您需要使用异步模式以允许请求完成并根据响应执行操作。
最后,如果响应状态符合您要求的规则,您可以提出 AJAX 请求并直接重新提交表单。尝试这个:
<form method="POST" action="<?= base_url('save_details/')?>" data-emailvalidationurl="<?= base_url('validate_email') ?>">
<!-- form form controls ... -->
<button type="submit">Add</button>
</form>
jQuery($ => {
$('form').on('submit', e => {
e.preventDefault();
$.ajax({
type: "POST",
url: e.target.dataset.emailvalidationurl,
data: { email: email },
dataType: 'json',
success: function(response) {
if (response.status) {
e.target.submit(); // rule met, allow form submission
} else {
console.log('Denied...');
// show message to user here...
}
}
});
});
});
另请注意,我将电子邮件验证 URL 放在 HTML 的数据属性中。原因与on*
事件属性是不好的做法的原因相同 - 关注点分离。您应该在 .js 文件中查看除 Javascript 之外的任何代码。
推荐阅读
- airflow - 如何将 Airflow 配置为使用 Snowflake 作为后端?
- openmp - 在 llvm-8.0.0 中使用 OpenMP 目标卸载
- php - 强制父方法使用子类值
- android - 我什么时候需要在 Gradle 依赖项中使用 Kapt?
- r - 将二分网络的 igraph 布局从垂直方向旋转到水平方向
- java-8 - 将循环中的处理转换为将许多列表更新为 CompletableFuture
- c# - WinForms TopLevel false 表单与 TextBox 鼠标选择混淆
- c# - C#,计算文件名(掩码)中的数据块/块。示例 Smith_John_1234_06202019.zip
- junit5 - @ValueSource(classes= .....) 有什么用
- mysql - 如何忽略表 1 中的记录(谁的 fk-refrence 必须存在于表 2 中)但条件不满足