jquery - 使用 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 提交函数的工作原理是它转到 Controller 中的“contactSubmit”函数。这个函数看起来像这样:

public function contactSubmit()
{

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

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

那么我该怎么做呢？

编辑:

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

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

编辑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();
});