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

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

那我该怎么做？

编辑：

似乎没有被Controller函数contactSubmit发送到新页面的关键是在提交jQuery函数中返回false，从我可以找到的主题的每个教程判断，但是......当我确实包括，根本不调用Controller函数。这意味着只有上面的第一个选项真正调用Controller函数（即.submit而不返回false）。

那我在这里做错了什么？如果我应该使用提交将数据传递到数据库，但是“return 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();
});

Answer 2

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

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

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

2 个答案: