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

页面的part / block / div无法刷新，但可以使用回调数据动态更新。

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

//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，供任何想要这样做的人使用。因此，每次按下“刷新内容”按钮时，表格都会刷新而不会重新加载页面，我不会再丢失加载的内容。

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

3 个答案: