如何使用Laravel结合jQuery实现查询结果的AJAX分页功能

一、value not defined 报错修复 #

该报错核心原因是AJAX获取到的响应结构不符合预期，可按以下步骤排查修复：

• 路径校验
  如果你的AJAX代码写在独立的.js文件中，Blade语法{{ url("/ajaxCall") }}无法被解析，会导致请求路径错误，返回非JSON格式的错误响应。解决方案：
  在Blade模板中提前声明全局路径变量：

<script>
const AJAX_REQUEST_URL = "{{ url('/ajaxCall') }}";
</script>

AJAX代码中直接使用该变量作为请求地址。

• 响应结构校验
  在success回调中先打印完整响应确认结构，增加容错判断：

success: function(response) {
    console.log(response); // 先在控制台查看返回结构是否符合预期
    var websites = "";
    // 增加非空和类型判断，避免空数据遍历报错
    if (response && Array.isArray(response.data)) {
        $.each(response.data, function(index, value) {
            websites += `<div>... ${value.web_name} ....... ${value.web_link} ...</div>`;
        });
        $(".getResults").html(websites);
    }
},

• 后端查询逻辑修正
  你当前的查询逻辑存在SQL优先级问题，分类查询的orWhere会导致前面的搜索条件失效，修改查询代码如下：

$companiesFinal = Websites::query();

if(!empty($request->searchWord)) {
    $companiesFinal->where('web_name', 'LIKE', '%' . $request->searchWord . '%');
    $companiesFinal->where('web_seo_url', 'LIKE', '%' . $request->searchWord . '%');
}

if(!empty($request->category)){
    // 把分类条件包在闭包中，避免orWhere破坏全局查询逻辑
    $companiesFinal->where(function($query) use ($request) {
        if(is_array($request->category)) {
            foreach($request->category as $categ) {
                $query->orWhere('web_category', 'LIKE', '%' . $categ . '%');
            }
        } else {
            $query->where('web_category', 'LIKE', '%' . $request->category . '%');
        }
    });
}

if(!empty($request->claimed) && $request->claimed != "all"){
    $companiesFinal->where('claimed', '=', $request->claimed);
}

if(!empty($request->sortBy)) {
    $sortOrder = $request->sortBy == "newest" ? 'DESC' : 'ASC';
    $companiesFinal->orderBy('created_at', $sortOrder);
}

$companies = $companiesFinal->paginate(7);
// 直接返回分页对象，Laravel会自动转为包含data字段的JSON结构
return response()->json($companies);

二、AJAX场景下分页组件实现 #

实现逻辑 #

Laravel的分页对象自带完整的分页信息，可通过后端渲染分页HTML的方式快速实现：

1. 控制器修改返回结构，将分页渲染为HTML一并返回：

$companies = $companiesFinal->paginate(7);
return response()->json([
    'list' => $companies->items(),
    'pagination' => $companies->links()->render()
]);

2. 前端页面新增分页容器：

<div class="pagination-box"></div>

3. AJAX success回调中新增分页渲染逻辑：

success: function(response) {
    var websites = "";
    if (response && Array.isArray(response.list)) {
        $.each(response.list, function(index, value) {
            websites += `<div>... ${value.web_name} ....... ${value.web_link} ...</div>`;
        });
        $(".getResults").html(websites);
        // 渲染分页
        $(".pagination-box").html(response.pagination);
    }
},

4. 绑定分页点击事件，实现无刷新切换页码：

// 用事件委托绑定动态生成的分页链接点击事件
$(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    // 从分页链接中提取页码
    const page = $(this).attr('href').split('page=')[1];
    // 拼接表单参数和页码参数发起请求
    const requestData = $("form").serialize() + `&page=${page}`;
    $.ajax({
        type: 'GET',
        url: AJAX_REQUEST_URL,
        data: requestData,
        success: function(response) {
            // 复用之前的渲染逻辑即可
        },
        error: function(xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
            console.log(thrownError);
        }
    });
});

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