1

对不起，如果主题标题含糊不清，但我不知道该怎么说。我正在创建一个具有编辑配置文件功能的网站，其中当用户填写表单并单击编辑配置文件按钮时，它将通过 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>
4

2 回答 2

2

这听起来可能很愚蠢，但是如果您信任您的 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 失败，则没有造成任何伤害。

于 2013-10-23T13:57:58.660 回答
1

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

而不是只有console.log(data)你可以在该函数中使用代码来更新你的#profile div。理想的方法是将editprofile.phpfname 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
        }
    });
});

顺便说一句，您可以仅使用针对表单的方式，而不是.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);
});
于 2013-10-23T14:02:08.797 回答