Ajaxで画面からPHPに値を渡しjson配列で返す

JavaScriptAjax

画面から Ajax で PHP に値を送り、 PHP （でゴニョゴニョして）から画面に json 形式の配列で値を返し、画面に表示する。

基本形

画面側

ファイル名： a.html とする

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- jQueryの読み込み (これがないと動かないよ) -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <title>Ajax Sample1</title>
</head>
<body>
  ID : <input type="text" id="id" />
  <button id="btn">SEND</button>
  <div><br></div>
  <div id="res">戻り値が表示される</div>
  <script>
  $(function(){
    // ボタンがクリックされたら
    $("#btn").on("click", function(event){
      // 入力されたID値を取得
      id = $("#id").val();
      $.ajax({
        type: "POST",
        url: "ajax.php",
        data: { "id" : id },
        dataType : "json"
      }).done(function(data){
        $("#res").text(data.id+' : '+data.name+' : '+data.hoge);
      }).fail(function(XMLHttpRequest, textStatus, error){
        alert(error);
      });
    });
  });
  </script>
</body>
</html>

dataType は、 PHP から戻ってくる値の型を指定する。
指定できる型の種類は、 text , json , html , xml , script , jsonp

dataType を指定すると、レスポンスの Content-Type ヘッダーは無視されるとココに書いてある。
確かに、 ajax 側で dataType を指定すると、 PHP で header(〜) を書かなくても値を受け取ることができた。 PHP に header(〜) を書いておけば、 ajax 側で dataType を指定しなくても正しく値が返ってきた。

PHP側

ファイル名： ajax.php としておく

<?php
  // 画面から送られたきた値
  $id = filter_input(INPUT_POST, 'id');	// $_POST['id']とも書ける
  $list = array("id" => $id, "name" => "お名前", "hoge" => "ほげ" );
  // 明示的に指定しない場合は、text/html型と判断される
  header("Content-type: application/json; charset=UTF-8");
  //JSONデータを出力
  echo json_encode($list);
  exit;

header 送信について、どの型で返すかは Content-Type を使って指定する。

json 型で送信する場合
header("Content-type: application/json; charset=UTF-8");

text (プレーンテキスト)型で送信する場合
header('Content-type: text/plain; charset=utf-8');

HTML 型で送信する場合
header('Content-Type: text/html; charset=utf-8');

PHP から返す値が多次元配列の場合

通常は、画面から送られたきた値（例えば id とか）をもとに、 PHP 側で DB からデータを取ってきて画面に送り表示させるという流れになると思う。または、 PHP でデータに何かしらの加工をしてから画面に返すであろう

画面側

a.html を少し修正 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- jQueryの読み込み (これがないと動かないよ) -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <title>Ajax Sample2</title>
</head>
<body>
  ID : <input type="number" id="id" />
  <button id="btn">SEND</button>
  <div><br></div>
  <div id="res">戻り値が表示される</div>
  <script>
  $(function(){
    $("#btn").on("click", function(event){
      id = $("#id").val();
      $.ajax({
        type: "POST",
        url: "ajax.php",
        data: { "id" : id },
        datatype : "json"
      }).done(function(data){
        //値を取り出す
        $("#res").append('<p>値を個別に取り出す');
        str = "id : "+data[0].id+", name１１１１ : "+data[0].name+", hoge : "+data[0].hoge;
        $("#res").append('<p>'+str);
        str = "id : "+data[1].id+", name : "+data[1].name+", hoge : "+data[1].hoge;
        $("#res").append('<p>'+str);
        str = "id : "+data[2].id+", name : "+data[2].name+", hoge : "+data[2].hoge;
        $("#res").append('<p>'+str);
        //ループで回す
        $("#res").append('<br><p>ループで回す');
        $.each(data,function(key,obj){
          str = key+" => id : "+obj.id+", name : "+obj.name+", hoge : "+obj.hoge;
          $("#res").append('<p>'+str);
        })
      }).fail(function(XMLHttpRequest, textStatus, error){
          alert(error);
      });
    });
  });
  </script>
</body>
</html>

data[0].id という形は、 PHP で $list に 0 , 1 , 2 と書いているから。数字ではなく文字列(例えば "abc" )が指定されている場合は、 data["abc"].id となる。
$.each を使っていれば、 key に "abc" という値が入る。

PHP側

ajax.php を一部変更 
<?php
$id = filter_input(INPUT_POST, 'id');
// （DBから取得したり、何かしらの）2次元配列
$list = array(
 0 => array(
   'id' => $id+10,
   'name' => 'お名前',
   'hoge' => 'ほげ'
 ),
 1 => array(
   'id' => $id+20,
   'name' => 'ムームー',
   'hoge' => 'hogehoge'
 ),
 2 => array(
   'id' => $id+30,
   'name' => 'X',
   'hoge' => 'ホゲホゲホゲ'
 )
);
header("Content-type: application/json; charset=UTF-8");
echo json_encode($list);
exit;


以上

Posted by Agopeanuts