使用AJAX提交表单后仍重定向至其他页面的问题求助

嘿，我来帮你搞定这个AJAX表单提交的问题！你遇到的页面重定向问题，大概率是因为没有阻止表单的默认提交行为，这是新手用AJAX提交表单时最容易踩的坑。结合你用的jQuery 1.8.3和CodeIgniter框架，我给你一步步梳理解决方案：

1. 修正前端jQuery代码，阻止默认提交行为 #

你的tambahBuku函数里，绑定了表单的submit事件，但必须先阻止浏览器的默认表单提交动作（也就是跳转页面），才能让AJAX生效。调整后的代码如下：

function tambahBuku() {
    $('#form_tambah')[0].reset();
    $('#form_tambah').unbind('submit').bind('submit', function(event) {
        // 关键：阻止表单默认提交行为
        event.preventDefault();
        
        var form = $(this);
        // 发送AJAX请求
        $.ajax({
            url: form.attr('action'), // 取表单的action地址
            type: form.attr('method'), // 取表单的method（POST/GET）
            data: form.serialize(), // 序列化表单数据
            dataType: 'json', // 约定后端返回JSON格式，方便处理提示
            success: function(response) {
                // 根据后端返回的状态显示提示
                if (response.status === 'success') {
                    alert('数据添加成功！');
                    form[0].reset(); // 成功后重置表单
                } else {
                    alert('添加失败：' + response.message);
                }
            },
            error: function(xhr, status, error) {
                // 处理请求失败的情况
                alert('请求出错，请稍后重试');
                console.log(xhr.responseText); // 控制台查看详细错误，方便排查
            }
        });
    });
}

2. 调整CodeIgniter后端逻辑，返回JSON响应 #

你的后端控制器不能再重定向或者加载视图了，必须返回JSON格式的响应，这样前端AJAX才能接收并处理提示信息。示例代码如下：

public function tambah_buku() {
    // 表单验证规则（根据你的需求调整）
    $this->form_validation->set_rules('judul', 'Judul Buku', 'required|trim');
    $this->form_validation->set_rules('penulis', 'Penulis', 'required|trim');
    // 更多验证规则...

    if ($this->form_validation->run() === FALSE) {
        // 验证失败，返回错误信息
        echo json_encode([
            'status' => 'error',
            'message' => validation_errors() // 直接用CI的验证错误信息
        ]);
    } else {
        // 验证通过，执行添加数据逻辑
        $data = [
            'judul' => $this->input->post('judul'),
            'penulis' => $this->input->post('penulis'),
            // 其他字段...
        ];
        
        if ($this->buku_model->save_data($data)) {
            echo json_encode([
                'status' => 'success',
                'message' => 'Buku berhasil ditambahkan!'
            ]);
        } else {
            echo json_encode([
                'status' => 'error',
                'message' => 'Gagal menyimpan data, silakan coba lagi.'
            ]);
        }
    }
    // 必须exit，避免CI输出额外的模板内容
    exit;
}

3. 额外排查点 #

• 确认表单的action属性正确指向上述后端方法，比如action="<?= base_url('buku/tambah_buku') ?>"
• 检查浏览器控制台（F12）的Network标签，查看AJAX请求是否发送成功，响应内容是否符合预期
• 如果jQuery有冲突，可以把代码里的$换成jQuery试试（比如jQuery('#form_tambah')）

按照上面的步骤调整后，应该就能实现无刷新提交并显示成功/错误提示了。如果还有问题，可以把完整的JS和后端代码贴出来，我再帮你进一步排查！

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