javascript - 单击按钮时使用 ajax 在后台或 sql 查询中刷新页面

Question

my UI (image)

Hi, in my UI ( image link above ) i have an update form with information from the database, when i edit something and click cancel button it will erase the edited information and display the original information from the database again. (javascript code below)

<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>

Or if i click save button it will save the changes using ajax, it successfully updated my information in the database without reloading the page.

$(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);
                    }
                }
            }
        );
});

});

The Problem is after saving the changes when i click cancel button again it display the information before the update not the new updated information. Cant figure out how to fix it. i think i have to refresh the page in the background or update the sql query after clicking save butotn but i don't know how. I need help. Thanks in advance.

<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() 函数中从服务器重新获取记录，而不是使用发送到页面的值，等等在。有很多方法可以做到这一点。