1

codeigniter MVCはAJAXとどのように連携しますか？

より具体的には、データをモデルに送信してからビューに戻すことができる最も基本的なAJAX機能は何ですか？深く関わっているコンポーネントの大部分を説明していただけますか？

4

1 に答える 1

3

PHP / JS / CodeigniterおよびWeb開発全般の初心者として、AJAXの背後にある概念と、AJAXがcodeigniterとどのように接続するかを理解することは、頭を悩ませることの1つでした。

SOや他のチュートリアルサイトでの回答の大部分は、経験豊富な誰かの視点から来ているようで、素人にはあまり意味がありませんでした。

そのため、このコードがどのように、そしてなぜ機能するのかを理解しようとしているほとんどの新規参入者に役立つと思われる、非常に「基本的な」回答を行うことにしました。これは非常に基本的な説明であることに注意してください。自由に編集できますが、専門用語を使わずにシンプルに保つようにしてください。

あなたがグーグルを通してそれをすることができるので、私は定義に関する詳細に入るつもりはありません。最初のステップであるjavascriptから始めます。

あなたのページで、あなたは実際のAJAXのための場所を見つけたいと思うでしょう。必ずJQUERYをロードしてください。詳細については、Googleの「Jquery」を参照して、ライブラリをできるだけ早くロードしてください。

このシナリオでは、スクリプトをHTMLに直接追加します。これは、スクリプトが簡単だからです。または、スタイルシートをロードするのと同じように、外部JSスクリプトをロードすることもできます。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<meta property="og:image" content="<?php echo base_url()?>img/logo/logo-big.jpg"/> 
<!--[if lt IE 10]>You are living in the past...Upgrade you Browser!! OMFG (google chrome/fire fox)<![endif]-->
<html lang="en">
    <head>
    <script src="/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="1.8.21/jquery-ui.min.js"></script>
    <link href="<?php echo base_url()?>css/account.css" rel="stylesheet" type="text/css"  
</head>
<body>
<div class="ajaxContainer">
    <form id="ajaxForm" method="get">
        <input type="text" id="ajax_input" name="q" placeholder="Type Here"/>
        <input type="submit" id="ajax_submit" value="" />
    </form>
</div>
</body>

HTML内に、次のスクリプトを追加します（通常は上部に追加しますが、どこにでも追加します）。

<script>
$('.ajaxContainer').delegate('#ajaxForm', 'submit', function() {
    $.ajax({
        var submitdata = $('#ajax_input').val();
        type: "POST",
        url: '/ajax/getdata',
        dataType: 'json', 
        data: { submitdata: submitdata },
        success: function(data){
            $('#ajax').html(data['content']);
        }
    });  
    return false;
});
</script>

説明は：

1$('.ajaxContainer').delegate('#ajaxForm', 'submit', function() {

jqueriesdelegate関数を使用して送信クリックを取得しました。十分に単純です。指定されたdiv/class（.ajaxContainer）内のすべてのID/クラスをスキャンします。

2$.ajax({

ここから魔法が始まります。

3var submitdata = $('#ajax_input').val();

ここでは、コントローラー/モデルで使用するデータを単に「取得」します。これは必須ではありませんが、この説明には確かに役立ちます。ここでは、内部の値を取得して、後で使用するため#ajax_inputにjavascript変数に追加しています。submitdata

4type: "POST",

うまくいけば、あなたはpost/getと典型的なhtmlフォームの提出に精通しているでしょう。この例では、データの送信方法にPOSTを指定します。必要に応じて、GETに変更できます。それで遊んでください。

,各セクションが、あまり複雑ではなく、注意すべき点で区切られていることに注目してください。実際、このコードに追加できるものは他にもたくさんあります。詳細については、jqueryAJAXのドキュメントを参照してください。http://api.jquery.com/jQuery.ajax/

5 url: '/ajax/getdata,

これはあなたが呼んでいるコントローラーです。後で詳しく説明しますが、ajaxその中に。という名前の関数とコントローラーを作成する必要がありますgetdata。繰り返しますが、youreは単にajaxをURLにポイントします。理論的には、アドレスバーに入力して手動でページにアクセスできます。そのコントローラーにデータを渡すと、PHP / codeigniterを使用して作業し、AJAX呼び出しを正常に実行するための一歩に近づきます。

6 

dataType: 'json', 
data: { submitdata: submitdata },

返されると予想されるデータのタイプを指定しますdataType。

data:POSTEDデータをコントローラーに送信して、モデルで取得して使用します。1つ目submitdata:は前に作成した変数で、2つ目はコントローラーで検索する名前を表します。

この時点で、コントローラーに移動します。思い出してください、私たちはAJAX呼び出しをurl:-に向けました/ajax/getdata,

そのURLを反映したコントローラー/関数を作成することをほのめかしました。これがどのように見えるかです：

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Ajax extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->model('logic_model');
    }

    public function getdata()
    {
        //First, grab the data being passed via AJAX through post
        $submitteddata = $this->input->post('submitdata');
        //Then send that data to your model to do whatever you want.
        $data['content'] = $this->logic_model->dosomething($submitteddata);
        // you need to echo the data.  json_encode turns an array into a JSON formatted string.  Without this, you will not receive a success, and you lose sir, goodday. 
        echo json_encode($data);
    }
}

そして私たちのモデル、別名：logic_model->

public function dosomething（submitteddata）{return "Success！" }

Success!コントローラにフィードバックせずに戻り、$data['content']エコーされます。

ここでjavascriptに戻り、発生したすべてをチェックして、success:またはfailure:関数のいずれかを実行します（失敗の詳細についてはドキュメントを参照してください）。

7

success: function(data){
    alert(data['content']);
}

ご覧のとおり、dataこの関数にはパラメーターが含まれています。これは、ajaxコントローラーでエコーしたJSONを表します。配列のように機能します。成功した場合は、返された文字列「Success！」に警告する必要があります。

そして、それは簡単です。明らかに、タスクが変更されると、いくつかの手順も実行されますが、通常は上記のシナリオを拡張するだけです。

うまくいけば、PHP / AJAXにまだ精通していないが、長い道のりを歩んできた人から、これが役立つと思うでしょう。

于 2013-03-25T18:23:48.400 に答える