[英]Getting an Ajax response from a form.submit() to PHP
我正在尝试将form.submit()调用与jquery / ajax调用结合起来以从我的php登录脚本中获取响应-我刚刚花了几个小时试图将数百篇文章/示例中的一些内容一个类似的主题,但是现在没有想法了,因此希望有人可以提供帮助。
我的登录表单如下所示:
<form id ="signInForm" action= "/userManagement/proxy_process_login.php" method="post" name="login_form">
<input required id="signInUserId" name="email" type="text" placeholder="Username/Email" class="input-medium">
<input required id="signInPassword" name="password" type="password" placeholder="Password" class="input-medium">
<button id="signin" name="signin" class="btn btn-success" onclick="signInSubmit(this.form, this.form.signInPassword);">Sign In</button>
</form>
函数signInSubmit()(由按钮的onclick调用)仅验证文本字段,并在最终调用“ form.submit()”之前用哈希版本替换纯文本密码,如下所示...
//ommited a bunch of text input validation
var p = document.createElement("input");
form.appendChild(p);
p.name = "p";
p.type = "hidden";
p.value = hex_sha512(password.value);
password.value = ""; // Make sure the plaintext password doesn't get sent.
form.submit();
我的PHP脚本(proxy_process_login)在添加任何jquery / ajax之前也可以正常工作,并且基本上可以做到这一点。
if (login($email, $password, $mysqli) == true) {
// Login success (ok to reload existing page)
header("Location: ../index.php?login=success");
exit();
} else {
// Login failed (do NOT want to reload page - just message "fail" back via AJAX so I can update page accordingly)
echo "fail";
exit();
}
但是考虑到我要提交表单的途径,我正在努力合并一个Ajax示例-因为我有了这个新的“ form”变量(附加了散列的p变量),所以我不能使用像这样使用jquery引用回表单的Ajax调用...
$.ajax({type:'POST', url: '/userManagement/proxy_process_login.php', data:$('#signInForm').serialize(), success: function(response) {
console.log(response);
}});
(因为jquery引用不包含新变量,并且我已经在表单的action属性中指定了php脚本)
而且我也不能在signInSubmit()内的“ form”变量上调用“ serialize()”之类的东西。
有什么适当的方法来构造解决方案的想法吗? 谢谢!
不幸的是,没有使用action属性提交本机表单的回调,过去曾用于将您重定向到该页面并在其中显示结果。
现在的现代方法是在阻止默认提交后使用ajax调用。
解:
HTML:
<form id="myForm">
<!-- form body here --!>
</form>
Javascript:
$("#myForm").submit(function(e){
e.preventDefault();//prevent default submission event.
//validate your form.
//disable your form for preventing duplicate submissions.
//call you ajax here.
//upon ajax success reset your form , show user a success message.
//upon failure you can keep your fields filled , show user error message.
})
这是我在任何项目中使用的典型算法,我建议使用parsley JS进行前端验证。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.