2

私はstackoverflowと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>

問題は主にビューの1番目（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の使用は控えてください。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);
    }
}
于 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 に答える