あれ、これどうやるんだっけ？

最近、Ajaxを使って任意の値を出力する方法に手間取ったので備忘録的視点で記述。
(Ajaxの説明についてはググればわかりやすい説明があるのでそちらをみてください)
Ajaxで詰まったとあれば、ぜひ参考にしてみてください。

<したいこと>
・すでにある値を画面に出力する
・任意の値を送信し、画面に出力する
※今回はAjaxを使って値を出力することが目的なので、DBには接続していません。
　DBからの出力はまた機会があれば投稿します。

はじめに

<準備物>
・XAMPP (ローカル環境が用意できればなんでもいけるかと)
・index.php(値を出力したり任意の値を入力する画面)
・ajax.js(ajax処理を書いていくjsファイル)
・api.php(すでにある値が書いてあるファイル)
・apiPost.php(任意の値が入るためのファイル)

<実装過程>
①各種ファイルをフォルダに入れてhtdocsへ→XAMPPを起動
②index.phpにメインの画面になるコードをかく
③api.phpで値を確認して、ajax.jsで記述して出力
④任意の値をapiPost.phpに入るよう記述、ajax.jsで処理して出力
⑤動作確認

①各種ファイルをhtdocsにいれる→XAMPPを起動

まずはフォルダ名[ajaxBasic]を作成し準備物にあるファイルを用意しよう。
XAMPPを持っている方は、htdocsにフォルダを入れてXAMPPアプリを起動。
→「localhost/ajaxBasic/」をブラウザurlに。ホワイト画面になればOK

②index.phpにメインの画面になるコードをかく

index.phpに出力画面になるコードをかこう。

<?php 
?>
<!-- index.php -->

<!DOCTYPE html>
<html>
<head>
  <title>ajax処理ー基礎ー</title>
  <link rel="stylesheet" type="text/css" href="ajax.css">
</head>
<body>

  <h1>jQueryでAjax処理をしようpart1</h1>

  <h2>注文表</h2>
  <ul id="orders">
  </ul>

  <h4>注文フォーム</h4>
  <p>name: <input type="text" id="name" name="name"></p>
  <p>drink: <input type="text" id="drink" name="drink"></p>
  <button id="add-order">注文を追加する</button>



<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</body>
</html>

①h2タグ：注文表　の下、ulタグ内に注文された内容(すでにあるapi.phpの値と任意に出力する値)が出力される ②h4タグ：注文フォーム　の下にそれぞれの入力フォームを作成 ③jQueryはCDNでもOK。

③api.phpで値を確認して、ajax.jsで記述して出力

はじめに、api.phpにある値を出力する方法をみていこー。

<?php
// api.php
$array =[
    [
        "id" => 0,
        "name" => "JUN",
        "drink" => "beer",
    ],
    [
        "id" => 1,
        "name" => "AOI",
        "drink" => "coffee",
    ],
];
// 配列($array)をJSONに変換(エンコード)する
$json = json_encode($array);
echo $json;

<ポイント>
検証ツールのNetworkを確認すると、api.phpは[{"id":0,"name":"JUN","drink":"beer"},{"id":3,"name":"AOI","drink":"coffee"}]のようにjsonでnetwork上にあればOK

それでは、ajaxを使ってapiの値をindex.phpに出力するように書いていこー

// ajax.js

$(function(){

  var $orders = $('#orders'); //index.phpの出力箇所のidを取得からの変数へ

  $.ajax({
    dataType: 'json',//データタイプはjsonを指定
    type: 'GET', //値を得たいからGET
    url: '/ajaxBasic/api.php', //ajaxBasicのなかのapi.phpにアクセス
    success: function(orders){ //通信成功時の処理
      console.log(orders); //consoleにArrayで{jsonデータ}が出ていたらOK
      $.each(orders,function(i,order){
        $orders.append('<li>name: '+ order.name + ', drink: ' + order.drink + '</li>'); //eachで回してorderそれぞれの要素をorder.name / order.drinkとして出力
      })
    },
    error: function(){ //通信失敗時の処理
      alert('error loading order');
    }
  });

①まず出力箇所のidをindex.phpからとってきて$ordersにいれる ②ajaxはdataType,type,urlなどを指定し、成功時と失敗時の処理を記入 ③success関数のordersにapi.phpのjsonデータが入っているのを確認 ④それぞれの要素分iをorderに分けて、liタグでorder.name / order.drinkで出力 ⑤通信失敗時のerror関数をテキトーにかく。(別にアラートでなくてもOK)

こんなふうに出力されていたら、まずはデータの出力という点で通信成功。

④任意の値をapiPost.phpに入るよう記述、ajax.jsで処理して出力

次にフォームから任意の値を受けた時、その値をajaxで処理をして、画面に出力する作業をはじめよー

はじめに、index.phpのフォームを確認

<?php 
?>
<!-- index.php -->

<!DOCTYPE html>
<html>
<head>
  <title>ajax処理ー基礎ー</title>
  <link rel="stylesheet" type="text/css" href="ajax.css">
</head>
<body>

  <h1>jQueryでAjax処理をしようpart1</h1>

  <h2>注文表</h2>
  <ul id="orders">
　　　・・さっきの出力値が出ているところ
  </ul>

//フォーム画面はここから
  <h4>注文フォーム</h4>
  <p>name: <input type="text" id="name" name="name"></p>
  <p>drink: <input type="text" id="drink" name="drink"></p>
  <button id="add-order">注文を追加する</button>
//ここまで


<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</body>
</html>

<ポイント>
①inputタグにそれぞれのid name と drinkを指定。
②上の入力値をbuttonタグをクリックしたときに値を送信するためにidをadd-orderと指定

次に、送信された値をajax.jsで処理してみよー

//ajax.js
$(function(){

  var $orders = $('#orders');
  var $name = $('#name'); //inputタグのname追加
  var $drink = $('#drink'); //inputタグのdrink追加

  
      //中略

    error: function(){
      alert('error loading order');
    }
  });


//ここから送信処理を記述
  $('#add-order').on('click',function(){//id add-orderがクリックされたら以下の関数を実行してね、と記述
    var order = { //受け取ったそれぞれの値を変数orderに格納
      name: $name.val(), //上で追加した変数の値をnameと定義
      drink: $drink.val(),//上で追加した変数の値をdrinkと定義
    };

    $.ajax({
      dataType: 'json',
      type: 'POST', //今回は送信するのでPOSTを指定
      url: '/ajaxBasic/apiPost.php', //同じようにurlでアクセス指定
      data: {data : order}, //変数orderをdataに指定、ここは任意の値を出力する時の追加項目。
      success: function(orders){ //apiPost.phpの値をordersへ
        console.log(orders); //consoleに{jsonデータ}が出ていたらOK
        $orders.append('<li>name: '+ orders.name + ', drink: ' + orders.drink + '</li>'); //出力と一緒の処理
      },
      error: function(){
        alert('error')
      }

    });

  });

①受け取った値をまずは変数name,drinkに格納 ②それぞれの値をorderにまとめる。(もちろんまとめなくて、そのまま{data: $name.val() ~ とかで書いてもよし) ③値を送信する時はPOSTを指定する

ここまでで、受け取った値の出力方法を記述。
あとはapiPost.phpで受け取った値をjsonデータで返す処理をすればOK

<?php
//apiPost.php
$order = $_POST['data'];
$name = $order["name"];
$drink = $order["drink"];

$array =[
        "id" => 100,
        "name" => $name,
        "drink" => $drink,
];
$json = json_encode($array);
echo $json;
?>

①ajaxで受け取ったdataを$orderに格納 ②それぞれのname,drinkの値を変数に格納、idは今回はいったん100にしておく(特に意味はなし) ③ ②の値を配列のなかに格納 ④jsonデータにエンコード

これ以降、ajax.jsのordersに配列の値が入って出力処理がされる。
２つあるajaxの出力処理はまとめることもできるけど、今回は割愛。

⑤動作確認

以下のように値を入力

注文を追加する、をクリックして

ページ更新もない、こんな感じで出力されればOK。

最後に

今回はajax処理をDBに接続しない形でざっくりとまとめました。
phpやlaravelなどDBに接続して値をajaxで処理する時も大体こんな感じで処理します。
時間があれば、ajaxを使って簡単なコメント機能でも作ろうかなと思います。