Question

我试图将一个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调用）只是验证文本字段，并在最终调用＆＃34; form.submit（）＆＃34之前用散列版本替换纯文本密码;，像这样......

//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示例 - 因为我已经有了这个新的＆＃34;形式＆＃34;变量（附加了散列p变量），所以我不能使用Ajax调用，它使用像这样的jquery返回表单...

 $.ajax({type:'POST', url: '/userManagement/proxy_process_login.php', data:$('#signInForm').serialize(), success: function(response) {
       console.log(response);
}});

（因为jquery引用不包含新变量，并且我已经在我的表单的action属性中指定了php脚本）

我也不能打电话给＆＃34;序列化（）＆＃34;在我的＆＃34;形式＆＃34; signInSubmit（）中的变量。

有关构建解决方案的适当方法的任何想法吗？！谢谢！

Answer 1

不幸的是，使用操作属性没有回复本机表单提交，过去使用它来将您重定向到该页面并在那里显示结果。

现代方法现在是在完成默认提交后使用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 进行前端验证。

从form.submit（）到PHP

1 个答案: