Php 将sql数据库中的更改实时反映为html

很抱歉，如果主题标题含糊不清，但我不知道该怎么说。我正在创建一个具有编辑配置文件功能的网站，当用户填写表单并单击编辑配置文件按钮时，它将通过PHP进行处理，编辑成功后将显示一个警报（通过jquery）。我有隐藏的div，当用户点击导航链接时会显示出来。但是，当我单击View Profile（主页）时，它仍然显示旧的sql信息，而不是更新的sql信息，因为我在查看过程中没有加载页面。如何让网站在不加载页面的情况下更新信息

这是html/jquery代码：

$("#editButton").click(function(){
    $.post("editprofile.php",
    {
        fname: $("#fnameBox").val(),
        lname: $("#lnameBox").val(),
        contact: $("#contactBox").val()
    },
    function(data){
      console.log(data)
    });
});

PHP内置HTML

<div id="profile">
    <?php echo "Name: " . $array['firstname'] . " " . $array['surname'] . "<br>Contact Number: " . $array['contactNumber'];?>
</div>

---

这听起来可能很愚蠢，但是如果您信任您的editprofile.php脚本（例如它不会失败），为什么不在调用该脚本的同时更新#profile

内容呢？大概是这样的：

$("#editButton").click(function(){
    $.post("editprofile.php",
    {
        fname: $("#fnameBox").val(),
        lname: $("#lnameBox").val(),
        contact: $("#contactBox").val()
    },
    function(data){
      console.log(data)
    });
    $("#profile").html(
        "Name: " + 
        $("#fnameBox").val() + 
        " " +
        $("#lnameBox").val() +
        "<br>Contact Number: " +
        $("#contactBox").val()
    );
});

$（“#编辑按钮”）。单击（函数（）{
$.post（“editprofile.php”，
{
fname:$（“#fnameBox”）.val（），
lname:$（“#lnameBox”）.val（），
联系人：$（“#联系人框”）.val（）
},
功能（数据）{
console.log（数据）
});
$（“#profile”）.html(
“名称：”+
$（“#fnameBox”）.val（）+
" " +
$（“#lnameBox”）.val（）+
“
联系电话：”+
$（“#contactBox”）.val（）
);
});

---

据我所知，这将为用户提供与重新加载页面相同的体验。如果editprofile.php失败，则不会造成任何伤害。

当您使用

$.post

这是

$.ajax的缩写。
函数（数据）
就是ajax成功时发生的情况

您可以在该函数中使用代码来更新您的#profile div，而不仅仅是
console.log（data）
。理想的方法是让您的
editprofile.php
将fname lname和contact作为json字符串返回到ajax调用（data）中（这非常简单，下面有一个示例）并使用它填充#profile div

editprofile.php：在数据库逻辑之后，使其返回json字符串：

<?php
    //Make sure this is the onlything echoed in the php file.
    //Sanitize your $_POST first im not doing it here but you should be careful with that;
    echo json_encode($_POST); 
?>

哦，天哪，这太棒了。在jQuery中我有很多东西需要学习，现在我离这个目标又近了一步。非常感谢你。
$("#editButton").click(function(){
    $.post("editprofile.php",
    {
        fname: $("#fnameBox").val(),
        lname: $("#lnameBox").val(),
        contact: $("#contactBox").val()
    },
    function(data){
        try{ 
            jdata = JSON.parse(data);
            $('#profile').html('Name: '+jdata.fname+' '+jdata.lname+'<br> Contact Number'+jdata.contact);
        } catch(e){
            //code to manage the error
            //If you are 100% sure the editprofile will work and don't want to catch the errors
            //Just use the code inside the try{} and forget the try...catch
        }
    });
});

//This would do the same as the code above without trying to catch the error:
$.post("editprofile.php", $('#myForm').serialize(), function(data){
    jdata = JSON.parse(data);
    $('#profile').html('Name: '+jdata.fname+' '+jdata.lname+'<br> Contact Number'+jdata.contact);
});