Question

嗨，在我的UI（上面的图片链接）中，我有一个更新表单，其中包含来自数据库的信息，当我编辑某些内容并单击取消按钮时，它将删除已编辑的信息并再次显示数据库中的原始信息。（以下javascript代码）

<script type="text/javascript">
        function reset()
        {
            document.getElementById("1").innerHTML='<?php echo $data["Firstname"] ?>';
            document.getElementById("2").innerHTML='<?php echo $data["Middlename"] ?>';
            document.getElementById("3").innerHTML='<?php echo $data["Lastname"] ?>';
            document.getElementById("4").innerHTML='<?php echo $data["Address"] ?>';
            document.getElementById("5").innerHTML='<?php echo $data["PhoneNumber"] ?>';
            document.getElementById("6").innerHTML='<?php echo $data["Birthdate"] ?>';
            document.getElementById("7").innerHTML='<?php echo $data["Gender"] ?>';
        }
    </script>

或者，如果我单击“保存”按钮，它将使用ajax保存更改，它在数据库中成功更新了我的信息，而无需重新加载页面。

$(document).ready(function(){
//check if btnUpdate is clicked
$("#save").click(function()
{
    var fname = $("#11").val();
    var mname = $("#22").val();
    var lname = $("#33").val();
    var add = $("#44").val();
    var phonenumber = $("#55").val();
    var bdate = $("#66").val();
    var gen = $("#77").val();


    $.ajax(
            {
                url:"AdminBasicInfoUpdate.php",
                type:"POST",
                data:{"f":fname,"m":mname,"l":lname,"a":add, "p":phonenumber,"b":bdate,"g":gen },
                success:function(e)
                {console.log(e)

                    if(e == 1)
                    {
                        alert("No Changes Have Been Detected!");
                    }
                    else
                    {
                        $("#fullname").html(fname+ " " + lname);
                        alert("Personal Information Has Been Updated Success!");
                        $("#note").slideUp(500);
                    }
                }
            }
        );
});

}）;

问题是在我再次单击取消按钮后保存更改后，它会在更新前显示信息而不是新的更新信息。无法弄清楚如何解决它。我想我必须在后台刷新页面或在点击保存按钮后更新sql查询，但我不知道如何。我需要帮助。提前谢谢。

<php session_start();

include("connection.php");
$username=$_SESSION['Username'];
$sql = "SELECT * FROM table WHERE Username='$username'";
$res=mysqli_query($con,$sql);
$data=mysqli_fetch_assoc($res); ?>

Answer 1

您可以使用现在的方法，但只需稍作修改即可。不要让reset()函数将页面元素设置为发射值，而是将它们设置为变量。像这样：

var currentFirstName = '<?php echo $data["Firstname"] ?>';
var currentMiddleName = '<?php echo $data["Middlename"] ?>';
// etc.

function reset()
{
    document.getElementById("1").innerHTML = currentFirstName;
    document.getElementById("2").innerHTML = currentMiddleName;
    // etc.
}

（旁注：你可以通过将变量组合成一个结构化对象来清理它。你可以稍微改进一下范围，而不是把事情放在窗口范围内。总会有改进，但是这有点超出了这里的要求。）

然后，在您的AJAX操作之后，当数据在服务器端成功更新后，您可以更新这些变量。像这样：

success: function(e) {
    // the rest of the code you have, and then...

    currentFirstName = fname;
    currentMiddleName = mname;
    // etc.
}

（您可以将其封装到另一个函数中，重构并清理，但是您认为合适。）

一旦更新了那些顶级状态变量（current*），每次调用reset()时，它都会将页面元素设置为这些变量的当前状态。所以基本上当页面加载时，它会将那些变量设置为当时记录的状态。在使用页面时，它会更新这些变量以存储当前状态，以便重置表单。

当然存在其他方法。您可以简单地重新加载页面（可能不理想），或者您可以在reset()函数中重新获取服务器中的记录，而不是使用发送到页面的值，依此类推。有很多方法可以做到。

在按钮单击时使用ajax刷新背景或SQL查询中的页面

1 个答案: