CodeIgniter框架怎么实现AJAX无刷新搜索_CodeIgniter框架jQuery交互实战【实战】-php教程-PHP中文网

codeigniter控制器返回json需显式设置content-type: application/json响应头，否则前端解析失败；必须处理csrf token，避免403错误；推荐统一返回结构如['status'=>'success','data'=>$results]并用事件委托解决动态dom事件丢失问题。

codeigniter框架怎么实现ajax无刷新搜索_codeigniter框架jquery交互实战【实战】

可以，而且是 CodeIgniter 的常规用法。关键不是“能不能”，而是控制器返回 JSON 时是否设置正确响应头、前端是否按约定解析、以及 CSRF 防护是否被忽略。

控制器必须显式设置 `Content-Type: application/json`

CodeIgniter 默认不自动设置 JSON 响应头，仅用 json_encode() 输出会导致浏览器当作文本渲染，jQuery 的 dataType: 'json' 会失败或触发 error 回调。

错误写法：echo json_encode($data);（无 header，$.ajax 收到的是 text/plain）
正确写法：header('Content-Type: application/json'); + echo json_encode($data); + exit;
如果用了 CI 的 $this->output->set_content_type('application/json')->set_output(...)，也必须确保没被后续输出干扰（比如视图自动加载）
调试技巧：在浏览器 Network 面板里点开请求，看 Response Headers 是否含 Content-Type: application/json

`$.ajax` 的 `dataType` 和后端数据结构要对齐

前端设了 dataType: 'json'，但后端返回的 JSON 如果是纯数组（如 [{"id":1,"name":"a"}]），某些旧版 jQuery 会因安全策略拒绝解析；CI 模型返回的 $query->result() 是对象数组，直接 json_encode() 没问题，但若手动构造关联数组，建议包一层 'data' => [...] 更稳妥。

基于jQuery的AJAX和JSON的实例中文WORD版

本文档主要讲述的是基于jQuery的AJAX和JSON的实例；过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。有需要的朋友可以下载看看

下载

推荐后端结构：['status' => 'success', 'data' => $results, 'count' => count($results)]
前端解析时别直接遍历 response，先检查 response.status === 'success'
避免在控制器里调用 $this->load->view() —— AJAX 控制器不该输出 HTML
错误现象：TypeError: Cannot read property 'length' of undefined，大概率是前端把字符串当对象用了

表单提交必须处理 CSRF Token，否则 403

CodeIgniter 3+ 默认开启 CSRF 保护，AJAX POST 请求若没带 token，控制器直接拒绝执行，连日志都不留。GET 请求不受影响，但搜索类场景常用 POST（参数多、语义更准）。

在视图中用 <?php echo $this->security->get_csrf_hash(); ?> 获取当前 token 值
把 token 加进 AJAX 请求的 data：data: {keyword: val, <?php echo $this->security->get_csrf_token_name(); ?>: '<?php echo $this->security->get_csrf_hash(); ?>'}
或者统一用 meta 标签存 token，JS 里读取：$('meta[name=csrf_token]').attr('content')
别在 AJAX 前临时关掉 CSRF（$config['csrf_protection'] = FALSE），这是安全漏洞

搜索结果动态插入 DOM 时注意 ID 冲突和事件丢失

用 $('#result-list').html(...) 替换内容后，原来绑定在子元素上的事件监听器会消失。比如搜索结果里有“删除”按钮，点击没反应，就是因为事件没重绑。

解决方案一：用事件委托，把监听器挂到父容器上，例如 $('#result-list').on('click', '.delete-btn', handler)
解决方案二：每次更新完 DOM 后，重新调用初始化函数（适合逻辑简单的情况）
避免用 id 作为循环项的唯一标识（如 <div id="item-1">...</div>），改用 data-id 属性，防止重复 ID 破坏 DOM 结构
如果搜索结果含表单控件，记得重置其状态（如清空输入框值、移除校验提示）

最常被跳过的其实是 CSRF Token 传递和响应头设置 —— 这两个点一错，整个流程就卡在“请求发出去了但没反应”或“alert 出来一串 JSON 字符串”，而不是预期的数据列表。