CodeIgniter Ajax表单-提交表单

小编典典

CodeIgniter Ajax表单-提交表单

ajax

我是stackoverflow和CodeIgniter的新手，目前正在尝试在Internet上找到的一些简单代码示例，以开始使用。我现在正在处理的是一种使用CI和Ajax（jQuery）的表单，并将表单的输入保存在数据库中，然后在表单的同一页上显示最新的表单。如果我感到困惑，那是这里的4.7应用示例。最初的源代码位于此处，但为了与最新版本的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）。也就是说，如果我e.preventDefault();从javascript代码中省略了这一行，那么表单将加载另一个页面（作为表单动作参数所隐含的消息/添加），该页面是空白页面，也以这种方式取消了我的应用程序的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（）调用的函数中没有执行任何操作。

任何帮助表示赞赏，并为大帖子感到抱歉。:)

阅读 241

2020-07-26

共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()一部分。如果启用了全局XSS过滤，则也不必xss清理它。您可以通过以下方式逐个清理：config/config.php``$this->input->post('name', true);

我建议改为：

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

2020-07-26