更新后重新加载AJAX加载的页面

Question

我试图了解在更新了一条记录之后如何重新加载加载了AJAX的动态页面。 我的页面上有以下jquery脚本。

<script type="text/javascript">
function showUser(str) {
    if (str == "") {
        $("#txtHint").empty();
        return;
    }
    $("#txtHint").load("data_ajax.php?q=" + str);
}
$(document).ready(function () {
    $("#txtHint").delegate(".update_button", "click", function () {
        var id = $(this).attr("id");
        var dataString = 'id='+ id ;
        var parent = $(this).parent();
        $.ajax({
            type: "POST",
            url: "data_update_ajax.php",
            data: dataString
        });

        return false;
    });
});
</script>

我以为如果我从data_ajax.php页面中调用它，然后从数据库中加载相应的数据后，可以用下面的代码完成此操作，但是它将刷新整个页面。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#ref_butn").click(function(){
 location.reload();
  });
});
</script>

我知道可以做到这一点，只是不确定在寻找答案后会转向哪里。

Answer 1

您只需要按照最初填充的步骤进行操作即可：

$("#txtHint").load("data_ajax.php?q=" + str);

这将加载您的“新” AJAX，并用它覆盖#txtHint中当前的内容。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#ref_butn").click(function(){
    //location.reload();
    $("#txtHint").load("data_ajax.php?q=" + str); // I don't know where str comes from, but you get the idea.
  });
});
</script>

Answer 2

页面的部分/块/格无法刷新，但可以通过回调中的数据动态更新。

在服务器端，回显您想在客户端显示的数据。 例如：

//Successful update in the database
$callback = array('heading' => 'Success!', 'message' => 'The data was successfully submitted');
echo json_encode($callback);

要检索数据，您必须将success回调函数传递给ajax块。

        $.ajax({
            type: "POST",
            url: "data_update_ajax.php",
            data: dataString,
            dataType: 'json',
            success: function(data) {
                         $('#yourDiv .heading').text(data.heading);
                         $('#yourDiv .message').text(data.message);
                     }
        });

Answer 3

Ben的答案奏效了，但他使我想出了一种更简单的方法。 因此，我实质上是在按钮上调用了原始function showUser(str) { ，只需要给它选择的$ _GET值即可。

<button name="users" onClick="showUser(this.value)" value="<?php echo $_GET['q']; ?>">Refresh Content</button>

该按钮位于data_ajax.php页面上，而不是任何希望这样做的人的父index.php上。 因此，每当我单击“刷新内容”按钮时，表都会刷新而不会重新加载页面，并且我不再丢失已加载的内容。