jQueryでAjaxを使ってPHPのAPIを実行する
どうもユーキです。
非同期でAPIを実行する方法としてAjaxというものがあります。
やれReactだ、やれVueだといわれていますが、jQueryもまだまだ使う機会があるので、簡単にまとめておきます。
実行方法
まずは、htmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/js/app.js"></script>
</head>
<body>
<h1>Test</h1>
<form id="form">
<input type="hidden" id="userid" name="userid" value="1">
<div>年齢：<input type="text" id="age" name="age"></div>
<div>趣味：<input type="text" id="hobby" name="hobby"></div>
<div><input type="button" id="submit" value="送信"></div>
</form>
</body>
</html>
そして、JSファイル
$.ajax({
url: '/api/index.php',
type: 'POST',
dataType: 'json', // レスポンスのデータ型を指定
data: { // 送信データ指定
userid: $('#userid').val(),
age: $('#age').val(),
hobby: $('#hobby').val()
},
})
.done(function (res, status, jqXHR) { // 通信成功時
console.log(res, status, jqXHR);
})
.fail(function (jqXHR, status, error) { // 通信失敗時
console.log(jqXHR, status, error);
})
.always(function (data, status, jqXHR) { // 通信完了後に呼び出される。 fails時は(jqXHR, status, error)が引数になる
console.log(data, status, jqXHR);
});
最後に、PHPファイル
<?php
// Content-TypeをJSONに指定
header('Content-Type: application/json');
// クロスオリジン対策
header('Access-Control-Allow-Origin: *'); // *のところはできればドメイン名を入れて限定的にしたほうが良い
$error = [];
// データの取得
$userid = filter_input(INPUT_POST, 'userid');
$age = filter_input(INPUT_POST, 'age');
$hobby = filter_input(INPUT_POST, 'hobby');
// 整合性のチェックとか色々処理
if ($age === '') {
$error['age'] = '年齢を入力してください。';
}
if ($hobby === '') {
$error['hobby'] = '趣味を入力してください。';
}
// レスポンス
if (empty($error)) { // エラーが無ければ
$data = [status => true];
echo json_encode($data);
} else { // エラーがある場合
http_response_code(400);
echo json_encode(compact('error'));
}
これでJSONを用いたAPI通信が可能になります。
レスポンスの型をかえたい場合は、JSファイルのdataTypeとPHP側の修正も必要になりますのでご注意ください。
