我有一个PHP页面,它显示了数据库中的用户帐户信息,现在用于编辑帐户信息,我已经构建了一个bootstrap模式。现在我希望在我们以模态提交表单后刷新父页面,以便页面显示数据库的更新值,我该怎么做?
以下是模式形式的页面代码:
<p data-placement="top" data-toggle="tooltip" title="Edit" data-original-title="Edit">
<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit">
<span class="glyphicon glyphicon-pencil"> Edit</span>
</button>
</p>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Your Detail</h4>
</div>
<div class="modal-body">
<form method="post" action="process.php" class="updateForm">
<div class="form-group">
<input type="hidden" name="userID" value="<?php echo $_SESSION['user']; ?>" />
<label for="customer_name">Customer Name :</label>
<input class="form-control" type="text" name="customer_name" id="customer_name" value="<?php echo $userRow['fullName']; ?>" />
</div>
<div class="modal-footer">
<!-- <input type="submit" name="submit" class="btn btn-block btn-warning" value="Save changes" /> -->
<input type="submit" name="submit" class="btn btn-success" id="submit" />
</div>
</form>
</div>
</div>
</div>
</div>
这是我的custom.js代码: 这里如果我将url:“process.php”更改为url:“index.php”并将process.php代码放入index.php文件中,则查询正常,否则查询也无效。
$("#updateForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitUpdateForm();
});
function submitUpdateForm(){
$.ajax({
type: "POST",
url: "process.php",
data: $('#updateForm').serialize(),
success : function(text){
if (text == "pass"){
updateFormSuccess();
}
else {
updateFormFailure();
}
},
error: function(){
alert("failure");
}
});
}
function updateFormSuccess(){
alert("Success");
$("#thanks").removeClass( "hidden" );
}
function updateFormFailure(){
$("#thanks").html("Fail");
}
这是process.php代码:
include('config.php'); //include the database connection
if ('POST' === $_SERVER['REQUEST_METHOD']) {
$userID = $_POST['userID'];
$customer_name = $_POST['customer_name'];
$results = mysqli_query($con, "UPDATE users SET fullName='$customer_name' WHERE userId=".$userID);
if ($results) {
echo "pass";
}else{
echo "invalid";
}
}
排除故障后,我发现ajax调用根本不起作用。任何人都可以指导我做错了吗?
答案 0 :(得分:0)
要在成功提交后刷新页面,请将此行添加到updateFormSuccess()
函数的末尾。
document.location.reload();
该页面将重新加载。这是来自MDN:
Location.reload()方法从当前URL重新加载资源。它的可选唯一参数是一个布尔值,当它为真时,会导致页面始终从服务器重新加载。如果为false或未指定,则浏览器可以从其缓存重新加载页面。除了缓存行为之外,forcedReload标志还会影响一些浏览器处理滚动位置的方式:普通重载会在重新加载页面DOM后尝试恢复滚动位置,而在强制模式下(当参数设置为true时)新的DOM会加载scrollTop == 0