如何在不重新加载整个页面的情况下刷新特定 div？

Question

<div id="success_hold">
<?php
    if($row['mandate_end']!=date('Y-m-d') && $row['job_position']=='unhold')
    {
        echo '<span class="badge badge-success">Open</span>';
    }
    else
    {
        echo '<span class="badge badge-warning">Hold</span>';
    }
?>
</div>

<script>
    $(document).ready(function(){
        var flag =  1;
        $(".hold").click(function(){
            job_id = this.id;
            if(flag == 1)
            {
                $.ajax({
                    type:"POST",
                    data:{"job_id":job_id},
                    url:"<?php echo base_url(); ?>pausehold",
                    success:function(data){
                        $("#success_hold").load("#success_hold");
                    }
                });
                flag = 0;
            }
            else
            {
                $.ajax({
                    type:"POST",
                    data:{"job_id":job_id},
                    url:"<?php echo base_url(); ?>resumehold",
                    success:function(data){
                        $("#success_hold").load("#success_hold");
                    }
                });
                flag = 1;
            } 
        }); 
    });
</script>

我有 div，其中 id="success_hold"。现在，当我点击 class="hold" 时会发生什么我正在更新我的数据。现在，我想刷新我的 <div id="success_hold"> 而不重新加载我正在使用 .load() 函数的整个页面但问题是当我使用 .load() 时，该函数在 [=17= 中显示整个页面].那么，我该如何解决这个问题？我只想刷新 success_hold.

谢谢

Answer 1

问题是因为 load() 用于发出另一个 AJAX 请求，并将从该请求检索到的 HTML 的一部分放在目标元素中。

由于您已经发出 AJAX 请求以获取数据，这大概是 HTML，您只需要 append() 数据到容器即可。

另请注意，您的条件两侧之间的唯一区别是 URL 请求被发送到，因此您可以轻松地 DRY 这段代码：

$(document).ready(function() {
  var flag = true;

  $(".hold").click(function() {
    var url = '<?php echo base_url(); ?>' + (flag ? 'pausehold' : 'resumehold');
    flag = !flag;

    $.ajax({
      type: "POST",
      data: { job_id: this.id },
      url: url,
      success: function(data) {
        $("#success_hold").append(data);
      }
    });
  });
});

如果 data 包含整个页面，那么您应该将该 PHP 文件更改为 return 只有相关的 HTML 因为这将有助于加快请求速度.如果出于某种原因您不能这样做，那么您可以像这样从响应中提取所需的元素：

$("#success_hold").append($(data).find('#success_hold'));

Answer 2

success:function(data){
    $("#success_hold").load("#success_hold");
}

这是您在 ajax 中的成功方法。您想将数据内容 pur 到您的 div #success_hold ?

如果你想要那个，就这样做：

success:function(data){
    $("#success_hold").html(data);
}

如何在不重新加载整个页面的情况下刷新特定 div？

How refresh particular div without reload whole page?

javascript

jquery

dom

ecmascript-5