CodeIgniter的Ajax表单 - 提交表格

我是新来的stackoverflow和CodeIgniter，我目前正在试验一些简单的代码示例，我已经在互联网上找到了一个开始。我现在正在使用的是一种表单，它使用CI和Ajax（jQuery），并将表单的输入保存到数据库中，然后将最近的表单显示在表单的同一页面上。如果我让你感到困惑，那么这是来自here的4.7应用示例。最初的源代码位于here，但我已经修改它以便与CI的最新版本一起工作，并引用了我下面的所有MVC文件。CodeIgniter的Ajax表单 - 提交表格

控制器：

<?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：

<!-- 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：

<!-- called from ajax call --> 

<ol> 
<?php foreach ($messages as $cur): ?> 
    <li><?php echo $cur->message; ?></li> 
<?php endforeach; ?> 
</ol>

的问题主要在于的意见（如default.php）1号。也就是说，如果我从javascript代码中省略e.preventDefault();行，表单会加载一个空白页面的不同页面（消息/添加，如表单动作参数所暗示的），同样也会取消我的应用程序的ajax行为。另一方面，如果我实际上添加了这一行，那么我的消息控制器的add方法不会被调用，因此不会将我输入的内容添加到数据库中。

最后，我想下面的js代码，而不是上下排列：

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

但似乎为$。员额（），因为没有什么是它应该运行的功能执行崩溃呀在成功的post（）调用中。

任何帮助赞赏和抱歉的大帖子。 :)

来源

2012-09-10 Lucky Luke

在如default.php，为什么'$ .post'网址PARAM空？ – froddd

您是对的，您必须致电e.PreventDefault();，但您还必须处理来自回调函数的回应，而您并非如此。回调需要几个参数，但第一个是你感兴趣的，这是你的服务器的响应。我已经表示它下面r：

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

我也删除$.("#content").load(...);。当第一个完成时，这实际上会执行另一个 AJAX请求。

现在，检查你的控制器...请不要使用$ _POST。 CodeIgniter为您提供$this->input->post()作为Input Library的一部分。如果您在config/config.php中启用Global XSS过滤，则无需xss清除它。您可以通过使用$this->input->post('name', true);

上后按岗位基础清洁，我建议这个：

function add(){ 
    $m = $this->input->post('message', true); 
    if($m){ 
     $this->Message_model->add($m); 
    } 
}

来源

2012-09-10 16:37:12

console.log（），我不知道，给了我路径。发布的URL以及加载（）上的URL都不正确。 '<？php echo site_url（）; ？>/message/...'工作。也许罪魁祸首是我没有禁用index.php CI“功能”，我不确定。现在，该应用按预期工作。非常感谢！ –

的问题不在于与CI，其JS这是错误的，

$(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("<?php echo base_url(); ?>/message/view"); 
        $('#message').val(''); 
       }); 
      }); 
     });

的e.preventDefault（）用于阻止提交按钮的默认行为（将带你去消息/添加），我们不想要。您稍后将URl参数添加到$ .post（）函数中是正确的，但在回调函数中，.load会将传递给它的URL加载到#content中，因此无需传递任何url，当然就赢了没有什么要加载的。

来源

2012-09-10 13:27:46 hndr

CodeIgniter的Ajax表单 - 提交表格

回答

相关问题