あれ、これどうやるんだっけ？
最近、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>
③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');
}
});
こんなふうに出力されていたら、まずはデータの出力という点で通信成功。
④任意の値を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')
}
});
});
ここまでで、受け取った値の出力方法を記述。
あとは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.jsのordersに配列の値が入って出力処理がされる。
２つあるajaxの出力処理はまとめることもできるけど、今回は割愛。
⑤動作確認
以下のように値を入力
注文を追加する、をクリックして
ページ更新もない、こんな感じで出力されればOK。
最後に
今回はajax処理をDBに接続しない形でざっくりとまとめました。
phpやlaravelなどDBに接続して値をajaxで処理する時も大体こんな感じで処理します。
時間があれば、ajaxを使って簡単なコメント機能でも作ろうかなと思います。