使用 jQuery 和 CodeIgniter 提交表单，无需刷新页面

Question

我想在 CodeIgniter 应用程序中使用 jQuery 提交表单。但是，Controller 中调用的函数一直想将用户发送到一个不存在的页面（与 Controller 函数同名）。

我试过这个：

$('#contactForm').submit(function () {

});

还有这个：

$('#contactForm').submit(function () {
    dataString = $("#contactForm").serialize();
    $.ajax({
        type:"POST",
        url:"<?php echo base_url(); ?>about/contactSubmit",
        data:dataString,

        success:function (data) {
            alert('test');
        }

    });

    return false;  //stop the actual form post !important!
});

表单是一个简单的表单，id 为“contactForm”。 jQuery 提交函数的工作原理是它转到控制器中的“contactSubmit”函数。这个函数看起来像这样：

public function contactSubmit()
{

    $this->load->model('customer_model');
    $this->customer_model->addCustomer();
}

所以它调用模型中的 addCustomer 函数，将信息添加到数据库中。一切正常。但随后它试图打开一个不存在的“customerSubmit”页面，这就是我想要避免的。我只是希望它留在同一个页面上，该页面有一个 jQuery 函数，用于告诉用户表单已提交成功。

那么我该怎么做呢？

编辑：

控制器函数contactSubmit不被发送到新页面的关键似乎是在提交jQuery函数中返回false，从我能找到的关于该主题的每个教程来看，但是......当我包含那个时，根本不调用Controller函数。这意味着只有上面的第一个选项真正调用了 Controller 函数（即没有返回 false 的 .submit）。

那么我在这里做错了什么？如果我应该使用提交将数据传递到数据库，但“返回 false”会阻止它实际调用控制器中的函数？

编辑 2： 找到了答案，请参阅我对 Christophs 帖子的评论！

Answer 1

只是猜测：尝试event.preventDefault() 停止在<form action="..."> 中定义的提交操作的默认行为（通常发送表单数据并转发到某种“收到请求”页面）。

代码是这样的：

$('#contactForm').submit(function (event) {
    dataString = $("#contactForm").serialize();
    $.ajax({
        type:"POST",
        url:"<?php echo base_url(); ?>about/contactSubmit",
        data:dataString,

        success:function (data) {
            alert('test');
        }

    });
    event.preventDefault();
});

Answer 2

可能您在页面尚未加载时分配submit处理程序，因此js看不到任何表单对象，尝试在页面加载事件处理程序中分配它，如下所示：

$(function() {
    $('#contactForm').submit(function () {
        ....
    });
});