CodeIgniter项目AJAX搜索异常：卡顿无数据显示求助

看起来你遇到的卡顿和无数据问题，主要是Model的SQL构建错误、Controller逻辑漏洞和AJAX配置不当这几个核心原因导致的，我帮你逐一拆解并修复：

一、Model层核心错误（直接导致无数据） #

你的search方法存在3个致命问题：

1. 未关联依赖表：SELECT语句里包含types.t_title和media.photo，但没有通过JOIN关联这两个表，数据库根本无法识别这些字段
2. WHERE条件写法完全错误：$this->db->where('users.username', 'LIKE', '%' . $options['username'] . '%' . $str); 不符合CodeIgniter的where语法规范，还把拼接的$str直接混入LIKE匹配值，会生成非法SQL
3. SQL拼接语法错误：$str开头直接用AND，如果没有前置条件会导致SQL语句开头出现AND，触发数据库语法错误

修复后的Model代码： #

var $table = 'users';

function search($options = array(), $status = true, $limit = null, $offset = 0) {
    $this->db->select('users.username, types.t_title, media.photo');
    // 关联依赖表，这里假设外键关联是users.type_id = types.id、users.media_id = media.id，请根据你的实际表结构调整
    $this->db->join('types', 'users.type_id = types.id', 'left');
    $this->db->join('media', 'users.media_id = media.id', 'left');
    
    // 处理用户名模糊搜索
    if (!empty($options['username'])) {
        $this->db->like('users.username', $options['username']);
    }
    
    // 处理用户状态筛选
    if (!$status) {
        $this->db->where('users.active', 1);
    }
    
    $this->db->group_by('users.id');
    if ($limit !== null) {
        $this->db->limit($limit, $offset);
    }
    $search = $this->db->get($this->table);
    return $search->result();
}

二、Controller层逻辑问题 #

1. 错误调用Model：$count = $this->Property->search($options, $status = FALSE); 应该调用$this->Users->search（搜索方法定义在Users Model中）
2. AJAX场景下的分页冗余：AJAX搜索不需要服务器端直接生成分页链接，当前代码会导致重复查询
3. URL路径错误：View中的AJAX URL写了welcome/welcome/search，重复了controller名称
4. form_validation验证逻辑：AJAX提交时如果未正确配置验证规则，会直接跳过搜索逻辑

修复后的Controller代码： #

public function search($offset = 0) {
    $options = $this->Users->array_from_post(array('username'));
    // 先注释验证逻辑，优先让搜索功能跑通，后续再根据需求添加
    // if ($this->form_validation->run('search')) {
        $perpage = 10;
        // 获取总匹配条数（建议单独写count方法优化性能，这里临时复用搜索方法）
        $count = $this->Users->search($options, FALSE);
        $total_rows = count($count);
        
        // 分页配置（AJAX场景下可返回分页数据给前端渲染，这里保留基础逻辑）
        if ($total_rows > $perpage) {
            $config['base_url'] = site_url('welcome/search');
            $config['total_rows'] = $total_rows;
            $config['per_page'] = $perpage;
            $config['uri_segment'] = 3;
            $this->pagination->initialize($config);
            $offset = $this->uri->segment(3) ? $this->uri->segment(3) : 0;
            $this->data['pagination'] = $this->pagination->create_links();
        } else {
            $this->data['pagination'] = '';
            $offset = 0;
        }
        
        $this->data['search'] = $this->Users->search($options, FALSE, $perpage, $offset);
        // AJAX请求直接返回搜索结果视图，无需加载完整模板
        if ($this->input->is_ajax_request()) {
            $this->load->view('search_results', $this->data);
            exit;
        }
        $this->load_search('search');
    // }
}

三、View层（AJAX和搜索结果）问题 #

1. 同步请求导致卡顿：async: false会阻塞浏览器主线程，必须改成async: true
2. AJAX URL错误：site_url('welcome/welcome/search') 重复了welcome，应改为site_url('welcome/search')
3. dataType设置错误：返回内容是HTML，应该用dataType: "html"而非text
4. 搜索结果取值错误：$sr['title']是数组取值，但Model返回的是对象数组（result()返回对象），应使用$sr->t_title或$sr->username

修复后的AJAX View代码： #

<script type="text/javascript">
$(document).ready(function() {
    $("form[name='search']").submit(function(e) {
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: "<?php echo site_url('welcome/search'); ?>",
            type: "POST",
            dataType: "html",
            data: formData,
            async: true, // 改为异步请求，解决页面卡顿
            success: function (msg) {
                $(".search_area").html(msg);
            },
            cache: false,
            contentType: false,
            processData: false
        });
        e.preventDefault();
    });
});
</script>

<form class="form-horizontal" method="post" name="search">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <div class="form-group">
                <div class="col-md-12">
                    <input type="text" class="input-text" id="username" name="username" placeholder="Username">
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <div class="form-group">
                <input type="submit" class="search-button" name="search" value="Search">
            </div>
        </div>
    </div>
</form>
<div class="search_area">
</div>

修复后的搜索结果View代码： #

<div class="main-title">
    <h1>Search Results</h1>
    <div class="border">
        <div class="border-inner"></div>
    </div>
</div>
<?php if (!empty($search)) : ?>
    <?php foreach ($search as $sr): ?>
        <p>Username: <?php echo $sr->username; ?> | User Type: <?php echo $sr->t_title; ?></p>
    <?php endforeach; ?>
    <?php echo $pagination; ?>
<?php else:?>
    <div class="notification-box">
        <h3><?php echo $this->lang->line('no_record'); ?></h3>
    </div>
<?php endif; ?>

最后验证步骤 #

1. 确认types和media表的关联条件符合你的实际数据库结构（我在Model中写的是假设条件，需自行调整）
2. 打开浏览器开发者工具的Network标签，点击搜索后查看AJAX请求的响应内容，确认是否返回正确的HTML
3. 如果仍有问题，可通过$this->db->last_query()输出最后执行的SQL语句，检查是否符合预期

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