ajaxで画面遷移なしに表示切替

今回は ajax を使用した表示内容の切替です。

jQuery を使用しない ajax は使ったことが有りましたが、結構大変面倒くさかった覚えがあります。
ajax は jQuery で楽になっているのでしょうか?

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            function funcDispChange() {
                $.ajax({
                    type     : 'POST',
                    dataType : 'text',
                    url      : 'sample_110.txt',
                    data     : {
                                 id   : '00001',
                                 Flg  : true
                               }
                }).done(function(data) {
                    // ajax ok
                    $("#disp_area").html(data);
                }).fail(function(data) {
                    // ajax error
                    $("#disp_area").html('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

        --></script>

    </head>
    <body>

        <div>
            <p id="disp_area">Normal Disp Text</p>
            <input type="button" onclick="funcDispChange();" value="Disp Change">
        </div>

    </body>
</html>

sample

えぇ、非常に簡単になってます!
すごいなぁ、コレで通信ができるのかぁ・・・

ちなみに ‘sample_110.txt’ の中身は以下の内容です。

Change Disp Text!!!

本来は urlオプションに php を指定して、dataオプションの値によって適切な値を受け取ります。
dataTypeオプションを ‘json’ などにすれば、テキストでなくデータも取得できます。
まぁ、php で成形した出力内容を表示する方が簡単に思いますけどね

また、結果の取得方法は jQuery のバージョンによって変わるようですが、今回は 1.8 での取得方法です。
ちなみに結果取得は以下のオプションを使用できます。
 done
  ajax通信が成功時の処理を指定します。
 fail
  ajax通信が失敗時の処理を指定します。
 always
  ajax通信が完了時の処理を指定します。
  成功,失敗 どちらの場合でも、完了時にここに記載した処理を実行します。

ajax 以外の方法でも外部のデータを取得する方法はいくつかあります。
しかし、エラー時の処理を指定できるは、ajax通信の強みですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 5 人中 3 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です