javascript - 如何刷新特定的div而无需重新加载整个页面？

<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 where id="success_hold"。现在，当我单击class="hold"来更新数据时会发生什么。现在，我想刷新<div id="success_hold">而不重新加载使用.load()函数的整个页面，但是问题是，当我使用.load()时，该函数以success_hold显示整个页面。那么，如何解决此问题？我只想刷新success_hold。

谢谢

最佳答案

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

由于您已经在发出AJAX请求以获取数据(可能是HTML)，因此您只需要将append()数据发送到容器即可。

还要注意，条件的两边之间唯一的区别是请求发送到的URL，因此您可以轻松地将此代码干燥:

$(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文件以仅返回相关的HTML，因为这将有助于加快请求的速度。如果由于某种原因而无法执行此操作，则可以从响应中提取所需的元素，如下所示:

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