jQueryのAjaxを使って非同期処理を行う方法

jQueryのAjaxを使って非同期処理を行う方法

ここでは、JavaScriptの人気ライブラリであるjQueryのAjaxを使って非同期処理を行う方法を紹介します。
非同期処理とは、ブラウザを更新(リロード)せずにページの内容を変更したりする方法です。

jQueryの使い方

2つの方法があります。

(1)jQuery公式サイトからのJSファイルをダウンロードしてきて使用する。
  https://jquery.com/

<script src="./js/jquery-3.4.1.min.js"></script>

(2)JSファイルをダウンロードせずにリンクして使用する。

jquery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

google

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Ajaxの書き方

new $.ajax({
    type: 送信タイプ,
    url: URL,
    data: 送信データ,
    success: function(data){
      //成功
    },
    error: function(data) {
      //失敗
    }
});
type: 送信タイプ(post、またはget)
url: 非同期処理をするファイル名。同一のドメインしか使えません。
data: 送信するデータ。フォーマットと名称、値を記述{format: タイプ(json、html), パラメータ名: 値}
success: 成功した時
error: 失敗した時

サンプル:PHPからJSONデータを取得して表示する

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<form>
<input type="tel" name="cd" id="cd">
<input type="button" value="取得" onclick="getName()">
</form>
<div id="get_name"></div>
<script>
function getName(){
  var cd = $('#cd').val();

  new $.ajax({
    type: 'post',
    url: 'get_name.php',
    data: {format: 'json', 'cd': cd},
    success: function(data){
      var fdata = JSON.parse(data);
      $("#get_name").text(fdata.name);
    },
    error: function(data) {
      alert("失敗");
    }
  });
}
</script>
</body>
</html>

get_name.php

<?php
$cd = $_POST["cd"];

$arr_name = array(1=>"佐藤", 2=>"鈴木", 3=>"高橋");

$data["name"] = $arr_name[$cd];
$json = json_encode($data);
?>