Question

我是stackoverflow和CodeIgniter的新手，我正在尝试一些我在互联网上找到的简单代码示例，以便开始。我现在正在处理的是一个使用CI和Ajax（jQuery）的表单，同时将表单的输入保存在数据库中，然后在与表单相同的页面上显示最新的表单。如果我把你搞糊涂了，那就是来自here的4.7应用示例。最初的源代码位于here但是我已修改它以便使用最新版本的CI，我引用了下面的所有MVC文件。

控制器：

<?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）。也就是说，如果我从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（）崩溃了，因为在应该成功调用post（）的函数中没有执行任何操作。

对于这篇重要帖子，任何帮助表示赞赏和抱歉。：）

Answer 1

你是正确的，你必须调用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()提供config/config.php作为Input Library的一部分。如果您在$this->input->post('name', true);中启用全局XSS过滤，则无需对其进行xss清理。您可以使用function add(){ $m = $this->input->post('message', true); if($m){ $this->Message_model->add($m); } }

逐个帖子进行清理

我推荐这个：

{{1}}

Answer 2

问题不在于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加载传递给#content的URL，所以没有传递任何url，当然赢了没什么可加载的。

CodeIgniter Ajax表单 - 提交表单

2 个答案: