jQuery 「Ajax」JSONエンコードデータをサーバから取得する

JSON（JavaScriptObjectNotation）は、JavaScriptのオブジェクトの表記方法に基づく、データの記述言語の一種です。JavaScriptとは非常に親和性が高く扱いやすいため、特にAjaxにおけるJavaScriptとサーバの間のデータ交換にはよく使われます。$.getJSON()メソッドは、Webサーバにリクエストを送信し、サーバ側のプログラムが出力JSONエンコードされたデータを取得します。第1引数「URL」として、リクエストの送信先のURLを指定します。第2引数「データ」には、サーバに送信するデータをオブジェクトで記述します。このデータは「?param1=hello&param2=world」のように整形され、サーバに渡されます。また、jQuery1.3以降「?param1=hello&param2=world」のような文字列をそのまま渡すことも可能になりました。第3引数「コールバック」には、リクエストの成功時に実行されるコールバック関数を指定します。コールバック関数の引数は、

データ・・・レスポンスデータ
テキストステータス・・・通信の結果を表す文字列
jqXHR・・・jqXHRオブジェクト

となります。jQuery1.5から、コールバック関数は従来のXMLHttpRequestをを拡張したjqXHRオブジェクトを返すようになりました。なお、第2引数以降は省略することも可能です。

成功時のコールバック関数では、レスポンスとしてJSONエンコードされたデータを受け取ります。JavaScriptからは、このデータを通常のJavaScriptのオブジェクトとして扱えます。

書式

$.getJSON(URL , [データ],[コールバック])

$.getJSON('sample.php',
  {param1: 'hello', param2: 'world'},
     function(data, textStatus, jqXHR){
     alert('get JSON');
    }
);

サンプル

サーバからJSONエンコードされたデータを取得する

<body>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <form>
          <br>
          姓<br><input class="form-input" type="text" name="lastname"><br> 
          名<br><input class="form-input" type="text" name="firstname"><br> 
          メールアドレス<br><input class="form-input" type="text" name="email"><br>
          電話番号<br>
          <input class="form-input" type="text" name="phone"><br>
          職業 <br>
          <select multiple class="form-input" name="job">
            <option value="">-------</option>
            <option value="employee">会社員</option>
            <option value="self-employed">自営業</option>
            <option value="student">学生</option>
            <option value="homemaker">主婦・主夫</option>
          </select><br>
          <button class="button" type="submit" name="submit">送信</button>
        </form>
        <div class="desc"></div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxxx all rights reserved.</p>
      </div>
    </div>
    <script>
    $(document).ready(function(){
      $('.button').on('click', function() {
        var param = new Object();
        param.lastname = $('input[name=lastname]').val();
        param.firstname = $('input[name=firstname]').val();

        $.getJSON(
          'sample11-3.php',
          param,
          function(data, textStatus, jqxhr){
            $('.desc').html('姓名は'+data.lastname + data.firstname+'です');
          }
        );
      });
    });
    </script>
    </body>

sample11-3.php

<?php
$data = array();
$data ['lastname'] = filter_input(INPUT_GET, 'lastname');
$data ['firstname'] = filter_input(INPUT_GET, 'firstname');
echo json_encode($data);

カテゴリー:AjaxJavaScriptjQuery