如何在不刷新整个页面的情况下刷新特定的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"的元素时，我正在更新我的数据。现在，我想刷新我的

，而不重新加载整个页面，我使用.load()函数。但问题是，当我使用.load()函数时，该函数会在success_hold中显示整个页面。那么，我该如何解决这个问题？我只想刷新success_hold。

谢谢。

- steave

---

你应该从服务器端发送HTML，并使用 .html() 将其粘贴到 div 上。 - Albeis

尝试使用 $("#success_hold").html($(data).find('#success_hold')); - Pingolin

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文件，只返回相关的HTML，这将有助于加快请求速度。如果由于某种原因无法这样做，那么可以像这样从响应中提取所需元素：

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

- Rory McCrossan

---

我使用了你的代码@RoryMcCrossan，但是我使用了alert(data)而不是$("#success_hold").append(data);，但是它没有在我的警告框中显示任何内容。 - steave

alert()有触发吗？ - Rory McCrossan

不，什么也没有发生。 - steave

Answer 2

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

这是 AJAX 中的成功方法。您想将数据内容放入 div#success_hold 中吗？

如果您想这样做，只需执行以下操作：

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

- Anthony Pilloud