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

Question

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

3

我想在CodeIgniter应用程序中使用jQuery提交表单。但是，在控制器中调用的函数始终希望将用户发送到一个不存在的页面（与控制器功能名称相同的页面）。

我已经尝试了以下方法：

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

public function contactSubmit()
{

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

所以它在 Model 中调用一个 addCustomer 函数，将信息添加到数据库中。所有这一切都很好运作。但是然后它试图打开一个不存在的“customerSubmit”页面，我想避免这种情况。我只想让它保持在同一页上，该页具有一个 jQuery 函数，告诉用户表单已被成功提交。

那么我该怎么做呢？

编辑：

从我能找到的每个主题的教程来看，不被控制器函数 contactSubmit 发送到新页面的关键是在 submit jQuery 函数中返回 false，但是......当我包括它时，控制器函数根本不被调用。这意味着只有第一种选择才真正调用控制器函数（即没有 return false 的.submit）。

所以我在这里做错了什么？如果我应该使用提交传递数据到数据库，但是“return false”阻止了它实际调用 Controller 中的函数怎么办？

编辑2：找到答案，请查看我的评论 Christophs post！

- Anders

谁试图打开customerSubmit页面？ - demalexx

其实没有人想这么做，但事实是我需要调用一个函数将数据添加到数据库中。当我这样做时，该函数会将用户传递到应该对应于控制器函数名称的页面。而这正是我不想要的... - Anders

@AndersSvensson 我不熟悉 PHP，但你看过这个答案了吗？这里 - sinemetu1

2个回答

0

可能是在页面尚未加载时分配了submit处理程序，因此js看不到任何表单对象，请尝试像这样在页面加载事件处理程序中分配它：

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

- demalexx

不，那不是问题，我只是省略了那部分以展示重要的部分。正如我所提到的，jQuery函数在提交时调用表单的action属性中的contactSubmit函数是有效的。问题只是CodeIgniter随后想要提供与此控制器函数同名的页面，而我不想更改页面，我只想调用一个函数将数据传递给数据库... - Anders

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christoph · Accepted Answer

我的猜测是：尝试使用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();
});