文章/答案/技术大牛

发布

社区首页 >问答首页 >CodeIgniter Ajax表单-提交表单

问CodeIgniter Ajax表单-提交表单
EN

Stack Overflow用户

提问于 2012-09-10 13:07:55

回答 2查看 10K关注 0票数 2

我刚接触过堆栈溢出和CodeIgniter，目前正在尝试一些我在互联网上找到的简单代码示例，以便有一个开始。我现在正在处理的表单是一个使用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)的第一位。也就是说，如果我从javascript代码中省略了e.preventDefault();行，那么表单将加载一个不同的页面( form操作参数所暗示的message/add)，这是一个空白页，也以这种方式取消了我的应用程序的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()调用上运行。

任何帮助，感谢和抱歉的大职位。:)

ajax

codeigniter

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-09-10 16:37:12

您必须调用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请求完成时执行另一个AJAX请求。

现在，检查您的controller...please不要使用$_POST。CodeIgniter将$this->input->post()作为输入库的一部分提供给您。如果你打开config/config.php中的全局XSS过滤，你也不用清理它。您可以使用$this->input->post('name', true);进行逐后清理。

我建议这样做：

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

票数 3

Stack Overflow用户

发布于 2012-09-10 13:27:46

问题不在于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()用于停止提交按钮的默认行为(这将带您到message/add)，这是我们不想要的。稍后将URl参数添加到$.post()函数是正确的，但是在回调函数中，.load将传递给它的URL加载到#content中，因此如果不传递任何url，当然就不会加载任何内容。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12352404

复制

相似问题

问CodeIgniter Ajax表单-提交表单
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CodeIgniter Ajax表单-提交表单EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CodeIgniter Ajax表单-提交表单
EN