Question

我有一个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">&times;</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调用根本不起作用。任何人都可以指导我做错了吗？

Answer 1

要在成功提交后刷新页面，请将此行添加到updateFormSuccess()函数的末尾。

document.location.reload();

该页面将重新加载。这是来自MDN：

Location.reload（）方法从当前URL重新加载资源。它的可选唯一参数是一个布尔值，当它为真时，会导致页面始终从服务器重新加载。如果为false或未指定，则浏览器可以从其缓存重新加载页面。除了缓存行为之外，forcedReload标志还会影响一些浏览器处理滚动位置的方式：普通重载会在重新加载页面DOM后尝试恢复滚动位置，而在强制模式下（当参数设置为true时）新的DOM会加载scrollTop == 0

通过引导模式形式

1 个答案: