Ajax通信
■JQueryを利用したAjax通信について解説する
例として「名前」と「年齢」の入力値をクライアント側にその内容を表示させてみる
前提条件:PHPを使用する為、サーバーに接続できる状態であること
下記例ではローカル開発環境でビルトインサーバーを起動している
・ローカル開発環境構築方法→ローカル開発環境構築(Windows)
・ビルトインサーバー起動方法→ビルトインサーバー起動
【クライアント側】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajaxの学習</title>
</head>
<body>
<div>
<form action="" method="post">
<p>名前:<input type="text" name="name" id="name"></p>
<p>年齢:<input type="age" name="age" id="age"></p>
</from>
</div>
<div>
<button type="button" id="ajax">Ajax</button>
</div>
<div class="result">
<!-- Ajax通信の結果 -->
</div>
<div class="final">
<!-- Ajax通信の結果(always) -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
//Ajaxボタンを押下時のイベント
$('#ajax').on('click', function(){
//Ajax通信の記述
$.ajax({
url: 'test.php',
type: 'POST',
timeout: 5000,
data: {
'name': $('#name').val(),
'age': $('#age').val()
}
})
// Ajax通信が成功した場合
.done(function(data) {
$('.result').html(data);
})
// Ajax通信が失敗した場合
.fail(function() {
alert('ERROR');
})
// Ajax通信が成功・失敗に関わらず処理
.always(function() {
$('.final').text("終了");
})
});
});
</script>
</body>
</html>
【サーバー側】
<?php
// isset関数でNULLチェック
if(isset($_POST['name']) && isset($_POST['age'])) {
//テキストボックスが未入力かどうかをチェック
if ($_POST['name'] != "" && $_POST['age'] != "") {
$name = $_POST['name'];
$age = $_POST['age'];
$str = "名前:" .$name . "\n" . "年齢:" .$age;
// nl2br — 改行文字の前に HTML の改行タグを挿入する
$result = nl2br($str);
echo $result;
} else {
//テキストボックスのどちらかが未入力の場合
$name = $_POST['name'];
$age = $_POST['age'];
if ($name == "") {
//名前と年齢の両方が入力されていない場合に備えて改行処理
echo nl2br("名前が入力されていません" . "\n");
}
if ($age == "") {
echo "年齢が入力されていません";
}
}
} else {
//テキストボックスがNULLの場合
echo "ERROR";
}
【Ajax通信の結果】
・両方入力されていた場合
・片方しか入力されていない場合
・両方入力されていない場合