10

私はCodeigniterでAJAXを使用する方法のまともな完全な実例を今1週間探していました（私はAJAX初心者です）。私が見た投稿/ツチは古いです-すべてのプログラミング言語が進んでいます。

ページを更新せずに、ページに何か（変数、データベースクエリ結果、HTML形式の文字列など）を返す入力フォームが必要です。この簡単な例は、ユーザー入力をデータベースに挿入する入力フィールドのあるページです。入力が送信されたら、別のビューをロードしたいと思います。これを行う方法を理解できれば、必要なことを何でもできるように適応させることができます（そして、うまくいけば、他の人にも役立つでしょう！）

私はこれを私の「テスト」コントローラーに持っています：

function add(){
    $name = $this->input->post('name');
    if( $name ) {
        $this->test_model->put( $name );
    }
}

function ajax() {
    $this->view_data["page_title"] = "Ajax Test";
    $this->view_data["page_heading"] = "Ajax Test";

    $data['names'] = $this->test_model->get(); //gets a list of names
    if ( $this->input->is_ajax_request() ) { 
        $this->load->view('test/names_list', $data);
    } else {
        $this->load->view('test/default', $data);
    }
}

これが「ajax」という名前の私のビューです（したがって、URL www.mysite.com/test/ajaxからこれにアクセスします）

<script type="text/javascript">
    jQuery( document ).ready( function() {
       jQuery('#submit').click( function( e ) {
           e.preventDefault();
           var msg = jQuery('#name').val();
           jQuery.post("
               <?php echo base_url(); ?>
               test/add", {name: msg}, function( r ) {
                   console.log(r);
               });
           });
       });
</script>

<?php echo form_open("test/add"); ?>
<input type="text" name="name" id="name">
<input type="submit" value="submit" name="submit" id="submit">
<?php echo form_close(); ?>

現在行われているのは、入力を入力し、データベースを更新して、ビュー「test / default」を表示することだけです（ページは更新されませんが、必要に応じて「test/names_list」は表示されません。よろしくお願いします。助けてくれて、そして私の惨めさから私を解放してくれて！

4

1 に答える 1

9

フォームに一意のIDを設定します。

echo form_open('test/add', array('id'=>'testajax'));

フォームをビューに置き換えたいと思います。

jQuery(document).ready(function(){
var $=jQuery;
$('#testajax').submit(function(e){
    var $this=$(this);
    var msg = $this.find('#name').val();
    $.post($this.attr('action'), {name: msg}, function(data) {
      $this.replace($(data));
    });
    return false;
});

json応答でビューのURLを返す場合のより良い方法：

$.post("<?php echo base_url(); ?>test/add", {name: msg}, function(data) {
  $this.load(data.url);
},"json");

あなたの最後のコメントから-私は本文を置き換えることを強くお勧めしません、そのようなコードをサポートすることは非常に難しいでしょう。

しかし、ここに答えがあります：

$.post("<?php echo base_url(); ?>test/add", {name: msg}, function(data) {
      $('body').replace(data);
    });
于 2012-12-15T00:13:18.803 に答える