如何使用 ajax 和 pjax 重新加载 html 的特定部分？

Question

我是 pjax 的新手。我只是想在点击表格跨度锚（a）html标签后发布一些数据后重新加载html的某些部分。 但它不起作用。 我的html代码是：

<div id="container">
      @if($task->member_responsible == $task->created_by)
          <td><span class="auto-complete">Auto-Completed</span></td>
             @elseif($task->status == true)
          <td class="taskStatus">
          <span class="completed status" id="{{$task->id}}" status="false"><a href="{{route('task.list')}}" data-pjax="#container"> Completed</a></span></td>
         @elseif($task->status == false)
           <td class="taskStatusFalse"><span class="incomplete status" id="{{$task->id}}" status="true"><a href="{{route('task.list')}}" data-pjax="#container">Incomplete</a></span></td>
         @else
           <td></td>
     @endif
</div>

我的 Pjax 和 ajax 代码是：-

  $(document).ready(function () {
        $(".status").click(function () {
            var status = $(this).attr('status');
            var id = $(this).attr('id');
            $.ajax({
                type: "GET",
                url: "{{route('task.status.update')}}",
                data: {status: status, id: id, "_token": "{{ csrf_token() }}"},
                success: function () {
                    $(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-container')
                }
            });
        })
    });

我的确切需求是我只是尝试从 ajax 更新数据并更改数据库中任务的状态已重新加载而无需刷新页面并打开或重定向我在 data-pjax="#container" 锚部分并仅重新加载容器 div 部分。如果有人能帮助我解决这个问题，我感到非常感激和感激。我的代码刚刚完成重新加载整个页面。但我只想重新加载容器 div 部分。

Answer 1

您应该考虑在服务器端渲染部分视图以填充 div，然后使用 json 响应更新它。与通过控制器路由和方法的典型请求非常相似，您可以加载刀片模板，渲染它，然后将其作为数据存储在您的 json 响应中。然后只需将其注入您指定的容器即可。请记住，没有任何内容会绑定到部分，因此如果您需要，需要在将其注入容器后完成。