ThinkPHP结合jQuery实现Ajax商品搜索功能详解

追风的人

发布时间：2026-10-14 | 1人浏览过

原创

利用ThinkPHP框架的M方法快速操作数据表，结合jQuery发起Ajax POST请求，可实现无需刷新页面的商品名称或ID模糊搜索，并通过回调函数动态更新页面列表。

功能目标

本示例旨在实现一个仿官网的商品搜索交互：用户在输入框填写关键词，点击提交后，系统后台检索匹配的商品（支持goods_id或goods_name模糊匹配），并将结果以JSON格式返回，前端接收数据后渲染至.goods-list容器中。

准备条件

已部署ThinkPHP环境及基础路由配置。
数据库中存在商品数据表，且已映射为Goods模型或对应数据表结构包含goods_id, goods_name, add_time, brand, price等字段。
前端页面引入jQuery库。

第1步：编写后端控制器逻辑

目的：接收前端传入的搜索关键字，执行数据库模糊查询，并统一返回JSON数据。

入口：访问URL /index.php/Goods/search

动作：

在控制器中定义search方法。
通过$_POST['search']获取用户输入的关键词。
实例化Goods模型（使用M('goods')）。
构建查询条件：array('like','%'.$keyword.'%')，作用于goods_id|goods_name字段，实现多字段联合模糊匹配。
执行查询并根据结果状态调用ajaxReturn返回数据或错误提示。

// 搜索接口
function search(){
    // 获取POST参数中的搜索内容
    $keyword = $_POST['search'];
    
    // 实例化 Goods 模型
    $Goods = M('goods');
    
    // 构建模糊查询条件：匹配 goods_id 或 goods_name
    $map['goods_id|goods_name'] = array('like', '%' . $keyword . '%');
    
    // 执行查询
    if($goods = $Goods->where($map)->select()) {
        // 查询成功，返回数据
        $this->ajaxReturn($goods, '查询成功!', 1);
    } else {
        // 查询失败或无数据
        $this->ajaxReturn(null, "查询失败,数据不存在！", 0);
    }
}

第2步：配置前端JS交互逻辑

目的：监听搜索按钮点击事件，验证输入非空，发起Ajax请求并处理响应。

入口：页面加载完成后执行的脚本块

动作：

初始化隐藏消息提示层.show_message。
绑定提交按钮#submit_from的click事件。
校验#search_box值是否为空，若为空则显示错误提示并聚焦输入框。
若校验通过，使用$.ajax发起POST请求：
- URL: /index.php/Goods/search
- 参数: {search: keyword}
- 数据类型期望: json
在success回调中解析返回的JSON：
- 判断data.status：1为成功，0为失败。
- 成功时遍历data.data数组，拼接HTML字符串（包含商品ID、名称、时间、品牌、价格等信息）。
- 将拼接好的HTML注入到.goods-list容器中。

$(document).ready(function(){
    $(".show_message").hide();
    var $search = $('#search_box');
    
    $("#submit_from").click(function(){
        // 1. 非空校验
        if($("#search_box").val() == ''){
            $(".show_message").html('错误提示：搜索框文本不能为空！');
            $(".show_message").fadeIn(1000);
            $(".show_message").fadeOut(1000);
            $search.focus();
            return false;
        }else{
            // 2. 发起Ajax请求
            $.ajax({
                type: "POST",
                url:"/index.php/Goods/search",
                data:{
                    search: $search.val()
                },
                dataType: "json",
                success: function (data) { 
                    // 3. 处理成功响应
                    if (data.status == 1) { 
                        var html = '';
                        $.each(data.data, function(no, items){
                            // 拼接商品信息行
                            html += '' + items.goods_id + ' | ' + items.goods_name + ' | ' + items.add_time + ' | ' + items.brand + ' | ' + items.price + '';
                        });
                        // 4. 渲染到页面
                        $(".goods-list").html(html);
                    } 
                    // 5. 处理失败响应
                    else if (data.status == 0) {
                        $(".show_message").show();
                        $(".show_message").html(data.info);
                        $(".show_message").fadeOut(3000);
                        return false;
                    }
                }
            });
        } 
    });
});