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側の修正も必要になりますのでご注意ください。

COMMENTS

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP