codeIgniter Ajax表单 - 提交表单表单、codeIgniter、Ajax
我是新来的计算器和codeIgniter和我目前正在尝试对我已经在互联网上找到一些简单的code的例子，为了得到一个开始。一个我的工作，现在是它使用CI和Ajax（jQuery的）一起保存在一个数据库中的表单的输入，然后显示最近他们在同一页面表单上的表单。 如果我迷惑你这是从此处。最初的源$ C $ C谎言的但我为了与CI的最新版本一起使用修改它，我引用我所有的MVC文件下方。
I'm new to stackoverflow and to CodeIgniter and I'm currently experimenting on some simple code examples I have found on the Internet in order to get a start. The one I'm working on right now is a form which uses CI and Ajax (jQuery) along with saving the inputs of the form in a database and then display the most recent of them on the same page as the form. If I confused you it's the 4.7 application example from here. The initial source code lies here but I have modified it in order to work with the latest release of CI and I quote all my MVC files just below.
控制器：
<?php
class Message extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->load->helper('form');
$this->load->helper('url');
$this->load->helper('security');
$this->load->model('Message_model');
}
function view()
{
//get data from database
$data['messages'] = $this->Message_model->get();
if ( $this->input->is_ajax_request() ) // load inline view for call from ajax
$this->load->view('messages_list', $data);
else // load the default view
$this->load->view('default', $data);
}
//when we pres the submit button from the form
function add()
{
if ($_POST && $_POST['message'] != NULL)
{
$message['message'] = $this->security->xss_clean($_POST['message']);
$this->Message_model->add($message);
}
else
{
redirect('message/view');
}
}
}
?>
型号：
<?php
class Message_model extends CI_Model
{
function __construct()
{
parent::__construct();
$this->load->database();
}
function add($data)
{
$this->db->insert('messages', $data);
}
function get($limit=5, $offset=0)
{
$this->db->order_by('id', 'DESC');
$this->db->limit($limit, $offset);
return $this->db->get('messages')->result();
}
}
?>
浏览
default.php：
default.php:
<!-- called using message/view -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<?php echo base_url('js/jquery-1.8.1.min.js'); ?>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#submit').click(function(e)
{
e.preventDefault();
var msg = $('#message').val();
$.post("", {message: msg}, function() {
$('#content').load("");
$('#message').val('');
});
});
});
</script>
</head>
<body>
<?php echo form_open("message/add"); ?>
<input type="text" name="message" id="message">
<input type="submit" value="submit" name="submit" id="submit">
<?php echo form_close(); ?>
<div id="content"></div>
</body>
</html>
messages_list.php：
messages_list.php:
<!-- called from ajax call -->
<ol>
<?php foreach ($messages as $cur): ?>
<li><?php echo $cur->message; ?></li>
<?php endforeach; ?>
</ol>
问题主要在于意见（default.php）1日。也就是说，如果我省略了电子preventDefault（）; 从JavaScript的code线则的形式加载不同的页面（信息/添加为表单操作参数暗示），这是一个空白页，也取消我的应用程序，这样的AJAX行为。
在另一方面，如果我真的加入这行，然后我的消息控制器ISN'T add方法调用，因此不会增加什么，我已经输入到数据库中。
The problem mainly lies in the 1st of the views (default.php). That is, if I omit the e.preventDefault(); line from the javascript code then the form loads a different page (message/add as the form action parameter implies) which is a blank page, also cancelling the ajax behavior of my application that way.
On the other hand, if I actually add this line then the add method of my message controller isn' t called, thus not adding what I've typed into the database.
最后，我想下面的JS code，而不是上下排列：
Finally, I tried the following js code instead of the other above:
$(document).ready(function()
{
$('#submit').click(function(e)
{
e.preventDefault();
var msg = $('#message').val();
$.post("<?php echo base_url(); ?>message/add", {message: msg}, function() {
$('#content').load("");
$('#message').val('');
});
});
});
但这种方式似乎为$。员额（）崩溃，因为没有什么是这应该是一个成功的职位（）调用运行函数中执行。
but that way it seems as the $.post() crashes because nothing is executed in the function which is supposed to run on a successful post() call.
任何帮助AP preciated对不起的大文章。 ：）
Any help appreciated and sorry for the big post. :)
推荐答案
您是正确的，则必须调用电子preventDefault（）; ，但是你必须还应对来自回调函数，你是不是反应。回调需要几个参数，但第一个是你感兴趣的，它是从你的服务器的响应。我已经记为研究如下：
You are correct that you must call e.PreventDefault();, but you must also deal with the response from the callback function, which you are not. The callback takes a few arguments but the first one is what you're interested in, it is the response from your server. I've denoted it as r below:
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
var msg = $('#message').val();
$.post("<?php echo base_url(); ?>message/add", {message: msg}, function(r) {
//do something with r... log it for example.
console.log(r);
});
});
});
我也删除 $（＃内容）的负载（...）; 。这实际上执行的另一个的AJAX请求时，第一个就完成了。
I've also removed $.("#content").load(...);. This would actually perform another AJAX request when the first one is complete.
现在，检查您的控制器......请使用$ _ POST避免。 codeIgniter为您提供了 $这个 - ＆GT;输入 - ＆GT;后期（）为输入库。如果你打开全球XSS过滤的配置/ config.php文件你将不必使用XSS清除它的。您可以通过使用清洁的，后由岗位的基础 $这个 - ＆GT;输入 - ＆GT;后期（名称，真）;
Now, inspecting your controller...please refrain from using $_POST. CodeIgniter provides you with $this->input->post() as part of the Input Library. If you turn on Global XSS filtering in config/config.php you won't have to xss clean it either. You can clean on a post-by-post basis by using $this->input->post('name', true);
我建议这个代替：
function add(){
$m = $this->input->post('message', true);
if($m){
$this->Message_model->add($m);
}
}
