如何在Laravel中实现AJAX新增数据后自动展示对应记录

问题根源 #

你当前代码的核心问题是：JS中写的@foreach属于Laravel服务端模板语法，仅在页面首次加载时会被PHP解析为静态HTML字符串，后续你通过AJAX新增数据后再调用showJobs()也不会重新拉取最新数据，所以看不到新增记录。

可选实现方案 #

你提到的两种实现方式都可行，根据你的业务需求选择即可： #

方案1：jQuery前端渲染（适合需要无刷新交互的场景）

该方案用户提交表单后无需刷新页面即可看到新增数据，体验更好，改造步骤如下：

1. 修改Laravel的job.store接口，新增数据成功后返回新增岗位的JSON格式数据
2. 给表单添加AJAX提交逻辑，提交成功后直接将返回的新数据拼接为表格行插入到列表中，或新增一个拉取当前用户全量岗位列表的接口，提交成功后重新渲染整个列表
3. 删除原JS中用@foreach渲染列表的逻辑，改为前端动态渲染。

参考代码示例：

// 记得先在head标签加<meta name="csrf-token" content="{{ csrf_token() }}">
$(document).ready(function () {
  // 页面加载先拉取岗位列表渲染
  loadJobs();

  // 表单提交逻辑
  $('#job-store').submit(function(e) {
    e.preventDefault();
    let formData = new FormData(this);
    $.ajax({
      url: $('input[name="url"]').val(),
      method: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(newJob) {
        // 新增成功后直接插入新行
        let newRow = `<tr>
          <td class="fw-normal">${newJob.id}</td>
          <td class="fw-normal">${newJob.employment_type}</td>
          <td class="fw-normal">${newJob.start_date}</td>
          <td class="fw-normal">${newJob.end_date}</td>
          <td class="fw-normal">${newJob.state}</td>
          <td class="fw-normal">${newJob.city}</td>
          <td>
            <form action="${'/job/' + newJob.id}" method="post">
              <input type="hidden" name="_token" value="${$('meta[name="csrf-token"]').attr('content')}">
              <input type="hidden" name="_method" value="DELETE">
              <div class="btn-group">
                <a href="${'/job/' + newJob.id + '/edit'}" class="btn btn-info btn-sm">ویرایش</a>
                <button type="submit" class="btn btn-danger btn-sm">حذف</button>
              </div>
            </form>
          </td>
        </tr>`;
        $('#showJobs').prepend(newRow);
        // 清空表单
        $('#job-store')[0].reset();
      }
    })
  })

  function loadJobs() {
    // 调用后端接口拉取当前用户岗位列表渲染，此处省略接口请求逻辑
  }
});

方案2：Laravel服务端渲染（适合交互简单的场景）

该方案改造成本最低，无需写额外的JS逻辑：直接移除AJAX提交逻辑，表单正常同步提交，提交成功后服务端重定向回当前页面，Laravel会重新渲染页面，自动加载最新的岗位数据。 #

选择建议 #

• 如果需要无刷新的流畅交互，选择jQuery前端渲染
• 如果对交互要求不高，选择Laravel服务端渲染更简单，后续维护成本更低

内容的提问来源于stack exchange，提问作者user16277300