Laravel 10中jQuery Ajax响应无法获取子元素返回undefined问题

核心问题分析 #

你遇到的undefined问题主要来自三个点：

1. jQuery筛选方法错误：Ajax返回的是完整HTML页面（包含<html>、<body>等顶级标签），filter('.tab-content')仅在返回内容的顶级元素中查找匹配项，但.tab-content是嵌套在内部的，因此找不到目标元素返回undefined。
2. 后端返回完整页面而非局部内容：当前路由返回包含layout的完整页面，需要从大量冗余代码中筛选目标元素，既低效又易出错。
3. HTML结构不规范：.tab-content直接放在<tbody>内部不符合HTML标准，<tbody>仅允许包含<tr>元素，这会导致浏览器渲染异常，也会干扰jQuery的元素查找。

前端代码快速修复 #

将filter替换为find，find会遍历返回HTML的所有后代元素查找匹配项：

@push('scripts')
<script>
$('.nav-link').click(function() {
  $('.nav-link').removeClass('active');
  $(this).addClass('active');
  let url = $(this).attr('href');
  // 目标改为替换tbody内的内容，而非整个payer-container
  let targetElement = $('tbody');
  
  $.ajax({
      method: 'GET',
      url: url
    })
    .done(function(response) {
      // 用find替代filter，查找嵌套的.tab-content
      let newRows = $(response).find('.tab-content').html();
      targetElement.html(newRows);
    })
    .fail(function() {
      console.log("Error");
    });

  return false;
});
</script>
@endpush

后端优化方案（更优解） #

修改/payers/outstanding和/payers/payed对应的控制器方法，让它们仅返回表格行的局部视图，避免返回完整页面：

1. 创建局部视图文件resources/views/payers/table-rows.blade.php，只保留表格行代码：

@if ($payments)
  @foreach ($payments as $payment)
  <tr>
    <td class="ps-4">
      <p class="text-xs font-weight-bold mb-0">{{ $payment["reference_id"] }}</p>
    </td>
    <td class="ps-4">
      <p class="text-xs font-weight-bold mb-0">{{ $payment["due_date"] }}</p>
    </td>
    <td class="text-center">
      <p class="text-xs font-weight-bold text-capitalized mb-0">{{ $payment["creditor_id"] }}</p>
    </td>
    <td class="text-left">
      <p class="text-xs font-weight-bold mb-0">{{$payment["currency"]}} {{ $payment["initial_amount"] }}</p>
    </td>
    <td class="text-center">
      <p class="text-xs font-weight-bold mb-0">{{$payment["currency"]}} {{ $payment["outstanding_amount"] }}</p>
    </td>
    <td class="text-center">
      <p class="text-xs font-weight-light mb-0">
        <i class="fa fa-download"> <a href=""></a></i> 
        @if ($payment['status'] == 'unPaid')
        <button class="payer-button" type="submit" style="width: auto; padding:2px; border-radius: 10px; background-color: #ff6321; color: white;">Pay Now</button>
        @endif
      </p>
    </td>
  </tr>
  @endforeach
@endif

2. 修改控制器方法，判断Ajax请求并返回局部视图：

public function outstanding()
{
    $payments = // 你的数据查询逻辑
    if(request()->ajax()){
        return view('payers.table-rows', compact('payments'));
    }
    return view('payers.index', compact('payments'));
}

// payed方法同理
public function payed()
{
    $payments = // 你的数据查询逻辑
    if(request()->ajax()){
        return view('payers.table-rows', compact('payments'));
    }
    return view('payers.index', compact('payments'));
}

3. 简化前端Ajax代码：

@push('scripts')
<script>
$('.nav-link').click(function() {
  $('.nav-link').removeClass('active');
  $(this).addClass('active');
  let url = $(this).attr('href');
  let targetElement = $('tbody');
  
  $.ajax({
      method: 'GET',
      url: url
    })
    .done(function(response) {
      // 直接返回表格行，无需筛选
      targetElement.html(response);
    })
    .fail(function() {
      console.log("Error");
    });

  return false;
});
</script>
@endpush

修复HTML结构问题 #

移除<tbody>内部的.tab-content容器，遵循HTML标准：

<tbody>
  @if ($payments) 
    @foreach ($payments as $payment)
    <tr>
      <!-- 表格内容 -->
    </tr>
    @endforeach 
  @endif
</tbody>

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