Question

很抱歉，如果主题标题含糊不清，但我不知道该怎么做。我正在创建一个具有编辑配置文件功能的网站，当用户填写表单并单击编辑配置文件按钮时，它将通过PHP处理，并在编辑成功时显示警报（通过jquery）。当用户点击导航链接时，我隐藏了显示的div。但是，当我单击View Profile（Home）时，它仍会显示旧的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>

Answer 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失败，则不会造成任何伤害。

Answer 2

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

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

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

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

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

2 个答案: