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>

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

谢谢

Answer 1

问题是因为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'));

Answer 2

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

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

如果需要，只需执行以下操作：

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

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

2 个答案: