[英]AJAX Password Change without Refresh
我正在尝试在我的网站中实现密码更改功能。 我已经完成了所有密码更改脚本,验证等操作。 但是现在我需要防止页面转到脚本页面或刷新。 当用户单击“提交”按钮时,除了显示successfully changed
或error
的消息外,我什么也不想更改。 所以这是我的HTML:
<form id="change_Pass" action="" method="post">
Current Password<input type="password" id="change_password" name="change_password"><br>
New Password<input type="password" id="new_password" name="new_password"><br>
Verify Password<input type="password" id="verify_password" name="verify_password"><br>
<input type="submit" value="Submit" id="change_pass_submit">
</form>
而我的jQuery:
$('#change_pass_submit').click(function(){
var $this = $(this);
$.ajax({
data: $this.serialize(), // get the form data
type: "POST", // GET or POST
url: "/Private/change_password.php", // the file to call
success: function() { // on success..
//$('#success_div).html(response); // update the DIV
alert("good");
},
error: function() { // on error..
//$('#error_div).html(e); // update the DIV
alert("bad");
}
});
return false; //so it doesn't refresh when submitting the page
});
和我的PHP:
<?php
session_start();
require_once '../classes/Bcrypt.php';
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
$usr = $_SESSION["username"];
$old_pwd = $_POST["change_password"];
$new_pwd = $_POST["new_password"];
$new_pwd = Bcrypt::hash($new_pwd);
try {
$link = new PDO('mysql:host=*;dbname=*;charset=UTF-8','*','*');
$query = "SELECT *
FROM Conference
WHERE Username = :un";
$stmt = $link->prepare($query);
$stmt->bindParam(':un', $usr);
$stmt->execute();
$row = $stmt->fetchAll();
$hash = $row[0]["Password"];
$is_correct = Bcrypt::check($old_pwd, $hash);
if($is_correct) {
$query = "UPDATE Conference
SET `Password`=:new_pwd
WHERE Username = :usr";
$stmt = $link->prepare($query);
$stmt->bindParam(':new_pwd', $new_pwd);
$stmt->bindParam(':usr', $usr);
$stmt->execute();
return true;
} else return false;
} catch(PDOException $e) {
print "Error!: " . $e->getMessage() . "<br/>";
die();
}
但是由于某种原因,当我按下“提交”按钮时,页面仍会转到change_password.php
。 我不知道为什么,我看了这么多教程,我的代码与它们匹配,但是由于某种原因,我的页面不会停留在同一页面上。 我哪里做错了?
将处理程序绑定到表单的submit
事件:
$(document).on('click', '#change_Pass', function() {
var $this = $(this);
$.ajax({
data: $this.serialize(), // get the form data
type: "POST", // GET or POST
url: "/Private/change_password.php", // the file to call
success: function() { // on success..
//$('#success_div).html(response); // update the DIV
alert("good");
},
error: function() { // on error..
//$('#error_div).html(e); // update the DIV
alert("bad");
}
});
return false; //so it doesn't refresh when submitting the page
});
而不是使用$('#change_pass_submit').click(function()
, $('#change_Pass').submit(function()
使用$('#change_Pass').submit(function()
。
.click仅在实际单击了提交按钮的情况下才起作用,即使用户按下Enter键,.submit也将起作用。
这应该可以解决您的错误,但是未经测试。
尝试把preventDefault()方法; 在.submit执行的功能的最后一行中
$(document).ready(function(){
$( "#cambiar_pass_form" ).submit(function() {
$.ajax({
...
...
});
event.preventDefault();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.