使用jQuery和CodeIgniter提交表单而不刷新页面

I want to submit a form using jQuery in a CodeIgniter application. However, the function called in the Controller keeps wanting to send the user to a page (with the same name as the Controller function) that doesn't exist.

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

I have tried this:

我试过这个:

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

});

And this:

$('#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!
});

The form is a simple form with id "contactForm". The jQuery submit function works in that it goes to the "contactSubmit" function in the Controller. This function looks like this:

表单是一个id为“contactForm”的简单表单。 jQuery提交功能的工作原理是它转到Controller中的“contactSubmit”函数。这个函数看起来像这样:

public function contactSubmit()
{

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

So it calls an addCustomer function in the Model that adds the info in the database. All that works fine. But then it tries to open a "customerSubmit" page that doesn't exist, and that's what I want to avoid. I just want it to stay on the same page, that has a jQuery function for telling the user that the form has been submitted ok.

因此它在Model中调用addCustomer函数,该函数在数据库中添加信息。一切正常。但后来它试图打开一个不存在的“customerSubmit”页面,这就是我想要避免的。我只是希望它保持在同一页面上,它有一个jQuery函数,用于告诉用户表单已经提交好了。

So how do I do this?

那我该怎么做?

EDIT:

It seems the key to not being sent to a new page by the Controller function contactSubmit is to return false in the submit jQuery function, judging from every tutorial on the subject I can find, but...when I do include that, the Controller function isn't called at all. This means that only the first option above really calls the Controller function (i.e. the .submit without return false).

似乎未通过Controller函数contactSubmit发送到新页面的关键是在提交jQuery函数中返回false,从我可以找到的主题的每个教程判断,但是...当我包括它时,控制器根本没有调用函数。这意味着只有上面的第一个选项真正调用Controller函数(即.submit而不返回false)。

So what am I doing wrong here? If I'm supposed to pass data to the database using a submit, but the "return false" stops it from actually calling the function in the Controller?

那么我在这里做错了什么?如果我应该使用提交将数据传递到数据库,但是“return false”会阻止它实际调用Controller中的函数吗?

EDIT 2: Found the answer, see my comment to Christophs post!

编辑2:找到答案,看看我对Christophs帖子的评论!

2 个解决方案

#1

Just a guess: Try event.preventDefault() to stop the default behaviour of the submit action which is defined in <form action="..."> (Which is normally sending the form-data and forwarding to some kind of "request received" page).

只是猜测:尝试使用event.preventDefault()来停止在

The code would be something like this:

代码将是这样的:

$('#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();
});

#2

Probably you assign submit handler when page isn't loaded yet, so js doesn't see any form object, try to assign it in page load event handler like this:

可能你还没有加载页面时分配提交处理程序,所以js没有看到任何表单对象,尝试在页面加载事件处理程序中分配它,如下所示:

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

#1