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

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

我已经试过这样：

$('#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为 “联系形式”。 jQuery提交功能的作用在于它发送到Controller中的“contactSubmit”函数。这个功能看起来是这样的：

public function contactSubmit() 
{ 

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

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

那么我该如何做到这一点？

编辑：

它似乎不被发送到由控制器功能contactSubmit一个新的页面，关键是要在提交jQuery函数返回false，从关于这个问题，我可以找到每一个教程来判断，但。 ..当我确实包含它时，Controller函数根本不会被调用。这意味着只有上面的第一个选项确实调用了Controller函数（即.submit没有返回false）。

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

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

来源

2012-02-08 Anders

谁试图打开customerSubmit页？ – demalexx 2012-02-08 16:48:33

好吧，没有人试图，但事实是我需要调用一个函数来将数据添加到数据库中，当我这样做时，该函数将用户传递到应该与Controller函数名称相对应的页面。这就是我不想... – Anders 2012-02-08 20:03:58

@AndersSvensson我不熟悉PHP，但你看过这个答案[这里]（http://stackoverflow.com/questions/5098945/submit-external-form-不，离开页式现场）？ – sinemetu1 2012-02-11 16:28:48

只是一个猜测：尝试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(); 
});

来源

2012-02-11 12:29:15 Christoph

不幸的是，与返回false具有相同的效果 - 即，根本不调用Controller中的函数，这是不好的，因为我需要去那个函数来进行实际的数据库更新。我只是不想离开页面......我相信你是对的，这是阿贾克斯应该如何工作。您可以使用event.preventDefault来停止正常提交并发布数据。但然后功能不被调用，这就是我不明白... – Anders 2012-02-11 12:45:10

你确定，控制器没有被调用？你的ajax数据的返回值是什么？你可以发布数据吗？添加一个错误函数和console.log（数据），看看会发生什么。 – Christoph 2012-02-11 13:27:47

好的，谢谢，最后的提示让我找到了答案。当检查这个我得到的信息，让我意识到它没有被调用，因为该网址是错误的。我在外部的js文件中有<？php echo base_url（）;？>，这是行不通的。所以我在php文件中创建了一个js变量，以便能够使用base_url的php函数，然后在ajax函数中使用这个js变量。然后它工作！谢谢，我会奖励你，让我找到答案。 – Anders 2012-02-13 15:56:39

也许你分配时，页面没有加载尚未submit处理程序，所以JS不会看到任何形式的物体，尽量把它分配在页面加载事件处理程序是这样的：

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

来源

2012-02-09 03:05:26 demalexx

不，这不是问题，我只是把这部分留出来展示重要的部分。正如我所提到的，jQuery函数的工作原理是，submit在表单的action属性中调用contactSubmit函数。问题是CodeIgniter然后想要为这个Controller函数提供一个同名的页面，而且我不想更改页面，我只是想调用一个函数来将数据传递给数据库... – Anders 2012-02-09 06:45:04

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

回答

相关问题