jQueryでAjax通信を使って、サーバーサイドのphpとデータのやり取りをする方法です。Web制作していると頻繁に使う機会がある通信方法です。
ファイル構成
- index.php
- style.css
- script.js
- back.php
このように今回はシンプルに同じ階層にすべてのファイルをおいてAjax通信をやっていきます。
作業手順の紹介
- ボタンをindex.phpとstyle.cssで作成する
- ボタンをクリックするとback.phpへの情報を作成して、POSTで送信する
- back.phpで送られてきた情報に情報を付け加えて情報を返す。
- 返ってきた情報をログに表示させる。
ボタンを作成する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<title>js</title>
</head>
<body>
<div class="container">
<button class="ajax_button">ajax</button>
</div>
</body>
<script src="/script.js"></script>
</html>7行目:同じ階層のstyle.cssファイルを読み込み、10行目:jQueryを読み込んでいます。jQueryを読み込むコードは（jQuery公式サイト）でコピーすることができます。22行目:同じ階層のscript.jsファイルを読み込んでいます。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
min-width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.ajax_button {
width: 200px;
height: 50px;
border-radius: 10px;
border: 0;
outline: none;
cursor: pointer;
color: white;
font-size: 1rem;
background: rgb(107, 107, 187);
}script.jsで情報を作成して、POSTで送信する
(function () {
$('.ajax_button').click(function () {
var url = '/back.php';
var data = [{
name: '佐藤'
},{
name: '鈴木'
}];
data = JSON.stringify(data);
$.ajax({
type: "POST",
url: url,
data: {
data: data
}
}).done(function (data) {
data = JSON.parse(data);
console.log(data);
}).fail(function (XMLHttpRequest, textStatus, errorThrown) {
return;
})
});
})();
3行目：ボタンをクリックしたときにAjax通信を行うようにしています。
5行目：同じ階層にあるback.phpファイルへのパスを指定しています。
6行目：back.phpファイルへの送るデータを作成しています。
12行目：作成した配列のデータをJSON形式へ変換しています。
JavaScript Object Notation (JSON) は表現用の標準的なテキストベースの構造データ表現フォーマットで、一般的にはウェブアプリケーションでデータを転送する場合に使われます。頻繁に見かけるデータフォーマットです。
14~24行目：jQueryのAjaxを送信する部分です。
15~19行目：typeを指定します今回はPOSTで送信します。他にはGETで送信することもできます。url（back.phpへのパス）, data（送信したいデータ今回の場合$_POST[‘data’]に情報が収納されてback.phpへ届きます。）
21~22行目：Ajax通信がうまく行われた際の処理をしています。ここでは返ってきたJSON形式のデータを配列のデータに変換して、ログに表示させています。
24行目：Ajax通信がうまく行われなかった際に処理される場所です。
back.phpに送られてきたデータを扱う
<?php
if (isset($_POST['data']) && !empty($_POST['data'])) {
$data = json_decode($_POST['data']);
$tanaka = array('name' => '田中');
array_push($data, $tanaka);
$data = json_encode($data);
echo $data;
}3行目：今回の場合は、$_POST[‘data’]でJSON形式のデータを取得することができる。
5行目：JSON形式のデータを配列のデータへ変換しています。
8行目：データベースに接続して、データを取得したり、保存したり、JavaScript側ではできないことがサーバーサイドなのでできます。が今回は、配列型のデータにback.php側からarray(‘name’ => ‘田中’)を追加して返します。
10行目：データを返すために再度JSON形式に変換しています。
12行目：返信
結果を見てみる
script.jsの21~22行目で、返ってきたJSON形式のデータを配列のデータに変換して、ログに表示させています。
うまく田中さんが配列に追加されているのがわかります。
以上がjQueryでAjax通信を使って、サーバーサイドのphpとデータのやり取りをする方法でした。
【Javascript】Ajaxを使ってデータをやりとりする方法を紹介
2023年01月10日
JavaScript