2

我是 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();
    }
}
?>

意见

默认.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>

消息列表.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() 调用上运行的函数中没有执行任何操作。

任何帮助都对这篇大文章表示赞赏和抱歉。:)

4

2 回答 2

3

您必须调用是正确的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。$this->input->post()CodeIgniter作为输入库的一部分为您提供。如果您打开全局 XSS 过滤，config/config.php您也不必 xss 清理它。您可以使用逐个帖子进行清洁$this->input->post('name', true);

我推荐这个：

function add(){
    $m = $this->input->post('message', true);
    if($m){
        $this->Message_model->add($m);
    }
}
于 2012-09-10T16:37:12.787 回答
0

问题不在于 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-10T13:27:46.617 回答