カテゴリー別アーカイブ: ajax

PHP/Ajax での認証機能

今回は簡単な認証機能用のフォーム作成です。
実際の認証処理は PHP で行うのですが、PHP で認証した後に内容を出力し
ajax で内容の入れ替えを行います。
まぁ、主となる部分が PHP で行う形なので、本ブログで扱う内容として
「適切なのかな・・・。」とは思いますが(笑)

<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(){

                $('#exeCheck').click( function () {
                    $.ajax({
                        type     : 'POST',
                        dataType : 'text',
                        url      : 'sample_110.txt',
                        data     : {
                                     id : $('#checkID').val(),
                                     pw : $('#checkPW').val()
                                   }
                    }).done(function(data) {
                        // ajax ok
                        $("#input_area").hide();
                        $("#disp_area").html(data).show();
                    }).fail(function(data) {
                        // ajax error
                        $("#disp_area").html('once more, please');
                    });
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #div {
                margin           : 20px;
            }
            
            #disp_area{
                display          : none;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="input_area">
                ID : <br />
                <input type="text" id="checkID" name="id"><br />
                PASSWORD : <br />
                <input type="password" id="checkPW" name="password"><br />
                <input type="button" id="exeCheck" name="submit" value="Submit">
            </div>
            <div id="disp_area">
            </div>
        </div>

    </body>
</html>

sample

sample では入力欄が2つあります。
ここで適正なID・PASSを入力してPHP 側での処理を行います。
本sample ではPHPを設定していないので何を入力しても正常となりますが(笑)

今回は WordPress にて特定のページだけ認証をしたいとの要望があったため
試験的に試してみました、この Blog では余り相応しくなかったかもしれませんね。

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

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

JSON 形式情報の取得

今回は JSON形式での情報取得をやった見ます。
前回の「(番外編)郵便番号から住所を取得する。」で云っていたJSON情報の取得方法です。
使用するのは getJSON になります。
指定した URL に記載されている JSON 形式の情報を取得する事が出来ます。

ちなみに「(番外編)郵便番号から住所を取得する。」のときも JSON 形式で取得する前提のため、
getJSON を使っても問題なかったんですけどね。
何にせよ getJSON は JSON情報を取得することに特化した AJAX という認識で良いかと思います。

<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"><!--

            var select_data;
            function funcGetData() {

                // Select Get Data
                select_data = $('#select_area input:checked').val();

                // JSON Get
                $.getJSON('sample_628.txt', function(json){
                    $('#disp_title p').replaceWith('<p>' + json[select_data].title + '</p>');
                    $('#disp_author p').replaceWith('<p>' + json[select_data].author + '</p>');
                    $('#disp_date p').replaceWith('<p>' + json[select_data].date + '</p>');
                });

            }

        --></script>

    </head>
    <body>
        <div id="select_area">
            <h1>Data ID</h1>
            <input type="radio" name="data_id" value="0" checked="checked"> 0<br />
            <input type="radio" name="data_id" value="1"> 1<br />
            <input type="radio" name="data_id" value="2"> 2<br />
            <input type="radio" name="data_id" value="3"> 3<br />
            <input type="radio" name="data_id" value="4"> 4<br />
            <input type="button" onclick="funcGetData();" value="Data Get">
        </div>
        <div id="Disp_area">
            <h1>Disp Data </h1>
            <dl>
                <dl>Title</dl>
                <dt id="disp_title"><p></p></dt>
                <dl>Author</dl>
                <dt id="disp_author"><p></p></dt>
                <dl>Date</dl>
                <dt id="disp_date"><p></p></dt>
            </dl>
        </div>

    </body>
</html>

sample
なお、json[] の 引数部分が 選択した radio button の選択した数字と一致するようにしています。

取得する JSON データは以下の内容になります。
[
{“title”:”Title_0″,”author”:”author_0″,”date”:”2011/01/01″},
{“title”:”Title_1″,”author”:”author_1″,”date”:”2012/01/01″},
{“title”:”Title_2″,”author”:”author_2″,”date”:”2013/01/01″},
{“title”:”Title_3″,”author”:”author_3″,”date”:”2014/01/01″},
{“title”:”Title_4″,”author”:”author_4″,”date”:”2015/01/01″}
]
[/html]

each を使用することで選択項目を複数に変更することもできます。
JSON データさえ作っておけば簡単な Datebase 代わりにも使えるため便利ですね。

まぁ、実際にはある程度毎にファイルを分割しておかないと、検索対象が多くなれば辛いものになります。
結局はPHPなどと組み合わせたほうが便利になるんだと思います。
前回の題材の様に郵便番号を使用するのであれば、細かく分割しておけば使用には耐えられるものかとは思いますが、
でも、JSON 形式の情報を管理するのが面倒ですよねぇ・・・

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

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

(番外編)郵便番号から住所を取得する。

今回は jQuery だけでは完結していないので番外編となっています。
近いうちに仕事で使いそうな処理の予習です。

まぁ、内容は非常に簡単です。
■郵便番号を入力してからボタンを押すと、県(Select)と県名を除く住所(Input)の中身を取得する。

こんな場合の強い味方は ajax となります。
なお、jQuery だけで行う方法もありますが、今回は仕事の予習のため PHP を使用します。
といっても、このブログは jQuery の備忘録なので PHP の処理は省いて記事を記載しています。
というか PHP 部分はまだ作って無いので書けません(笑)
※ jQuery だけで行う方法(getJSON)に関しては、掲載要望があるか、私の気が向いたら書くかもしれません。

<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 funcSetAddress() {
                $.ajax({
                    type     : 'POST',
                    dataType : 'json',
                    url      : 'sample_608.txt',
                    data     : {
                                 zip1 : $('#zip1').val,
                                 zip2 : $('#zip2').val
                               }
                }).done(function(data) {
                    // ajax ok
                    $('#pref').val(data[0].prefcode);
                    $('#addr').val(data[0].citydata);
                }).fail(function(data) {
                    // ajax error
                    alert('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

        --></script>

    </head>
    <body>
        <div id="zip_area">
            <h1>zip code</h1>
            <input id="zip1" name="zip1" value="522" readonly="readonly"> - <input id="zip2" name="zip2" value="0052" readonly="readonly">
            <input type="button" onclick="funcSetAddress();" value="zip -> addr">
        </div>
        <div id="addr_area">
            <h1>addr code</h1>
            <select id="pref" name="pref">
                <option value="">none select</option>
                <option value="1">pref1</option>
                <option value="2">pref2</option>
                <option value="3">pref3</option>
                <option value="4">pref4</option>
                <option value="5">pref5</option>
            </select>
            <input id="addr" name="addr">
        </div>

    </body>
</html>

sample

まず、郵便番号を入力して変更用のボタン「zip -> addr」をクリックします。
※今回の sample では郵便番号の値は変更できませんが、本番ではもちろん変更可能にします。

クリックすると、ajax にて特定のページに 郵便情報を送信します。
まぁ、郵便番号をもとに PHP で住所情報を取得するわけですが、今回の注目する個所は dataType の設定です。
以前に「ajaxで画面遷移なしに表示切替」でも、さらっと書きましたが、ajax で情報を取得する場合には
dataType の値を変更することで 取得できる形式が変わります。

今回は dataType として JSON を指定しています。
jQuery を使用して、複数の情報を取得する場合はやっぱり JSON データが便利ですね。
今回は情報取得に PHP を使用する予定なので1件分の情報しか取得しませんが、getJSON を使用する場合は必須ですね。

ちなみに今回の sample では以下の JSON データを受け取ることを想定しています。(sample_608.txt の中身です。)

[{"prefcode":"3","citydata":"city_address"}]

ajax で正常に情報が受け取れた場合には、json の内容を分割して対象の内容を変更しています。
なお、data[0].prefcode の 0 はデータの件数になるため忘れ内容にしましょう。

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

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

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 はここからダウンロードしてください。

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