将sql数据库的变化实时反映到html中答案

【问题标题】：Reflect changes in sql database to html in real time将sql数据库的变化实时反映到html中
【发布时间】：2013-10-23 13:49:51
【问题描述】：

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

这是 html/jquery 代码：

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

HTML 中的 PHP

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

【问题讨论】：

标签： php jquery html mysql

【解决方案1】：

这听起来可能很愚蠢，但是如果您信任您的 editprofile.php 脚本（例如它不会失败），为什么不更新#profile <div> 内容以及对该脚本的调用呢？像这样：

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

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

【讨论】：

天哪，这太棒了。我在 jQuery 中有很多东西要学，现在我离这个目标又近了一步。非常感谢。

【解决方案2】：

当您使用$.post（$.ajax 的简写）时，function(data) 就是 ajax 成功时发生的情况。

您可以在该函数中添加代码来更新您的#profile div，而不是只有console.log(data)。理想的方法是让您的 editprofile.php 返回 fname lname 并将联系人作为 json 字符串（这很容易，下面有一个示例）返回到 ajax 调用（数据）并使用它来填充#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); 
?>

Javascript：

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

顺便说一句，您可以使用.serialize() 仅针对表单，而不是单独获取字段的.val()：

//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);
});

【讨论】：