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>

PHP側

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

<?php
  // 画面から送られたきた値
  $id = filter_input(INPUT_POST, 'id');	// $_POST['id']とも書ける

  $list = array("id" => $id, "name" => "お名前", "hoge" => "ほげ" );
 // json型で画面に値を返すのに必要(これ書かないと、画面はtext/html型と判断する)
  header("Content-type: application/json; charset=UTF-8");
 //JSONデータを出力
  echo json_encode($list);

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+", name1111 : "+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);




以上

Posted by Agopeanuts