jQuery Ajax POST Example with PHP
2024-04-02
jQuery Ajax POST Example with PHP
この解説では、jQuery Ajax POST を使って、データを PHP サーバーに送信し、処理結果をブラウザに表示する方法について、初心者向けに分かりやすく説明します。
以下のコードは、ユーザーが入力した名前と年齢を PHP サーバーに送信し、サーバーから返送されたメッセージを表示する例です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Ajax POST Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>ユーザー情報入力</h1>
<form id="user-form">
<label for="name">名前：</label>
<input type="text" id="name" name="name">
<br>
<label for="age">年齢：</label>
<input type="number" id="age" name="age">
<br>
<button type="submit">送信</button>
</form>
<br>
<div id="message"></div>
</body>
</html>
JavaScript
$(function() {
$("#user-form").submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var age = $("#age").val();
$.ajax({
type: "POST",
url: "ajax-post.php",
data: {
name: name,
age: age
},
success: function(response) {
$("#message").html(response);
}
});
});
});
PHP
<?php
// POSTされたデータを取得
$name = $_POST["name"];
$age = $_POST["age"];
// データ処理
$message = "こんにちは、" . $name . "さん。" . $age . "歳ですね。";
// 結果を返す
echo $message;
?>
コード解説
- HTML: ユーザーが入力する名前と年齢の入力フォームと、メッセージ表示用の div 要素を用意します。
- JavaScript:
$("#user-form").submit(function(e) { ... }): フォーム送信時に実行される処理を記述します。e.preventDefault(): フォームの送信をキャンセルします。var name = $("#name").val();: 入力された名前を取得します。$.ajax({ ... }): Ajax 通信を行います。type: 送信方法を "POST" に設定します。url: 送信先の PHP ファイルの URL を設定します。data: 送信するデータオブジェクトを設定します。name: 入力された名前
success: 通信成功時の処理を記述します。response: サーバーから返送されたメッセージを受け取ります。$("#message").html(response): メッセージを div 要素に表示します。
- PHP:
$_POST["name"]: POST された "name" パラメータの値を取得します。$message: ユーザーへのメッセージを生成します。echo $message: メッセージをブラウザに送信します。
実行方法
- 上記のコードをそれぞれ
index.html,ajax-post.phpというファイル名で保存します。 - Web サーバー上でファイルを公開します。
- ブラウザで公開された URL を開きます。
- フォームに名前と年齢を入力し、「送信」ボタンをクリックします。
- サーバーから返送されたメッセージが div 要素に表示されます。
補足
- この例では、シンプルなデータ送信と表示のみを行っていますが、実際には様々な処理に応用できます。
- Ajax 通信は非同期通信なので、ページ全体の読み込みを待たずにデータ送信
jQuery Ajax POST Example with PHP のサンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Ajax POST Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>ユーザー情報入力</h1>
<form id="user-form">
<label for="name">名前：</label>
<input type="text" id="name" name="name">
<br>
<label for="age">年齢：</label>
<input type="number" id="age" name="age">
<br>
<button type="submit">送信</button>
</form>
<br>
<div id="message"></div>
</body>
</html>
$(function() {
$("#user-form").submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var age = $("#age").val();
$.ajax({
type: "POST",
url: "ajax-post.php",
data: {
name: name,
age: age
},
success: function(response) {
$("#message").html(response);
}
});
});
});
<?php
// POSTされたデータを取得
$name = $_POST["name"];
$age = $_POST["age"];
// データ処理
$message = "こんにちは、" . $name . "さん。" . $age . "歳ですね。";
// 結果を返す
echo $message;
?>
改善点
- コードの説明を追加しました。
- サンプルコードの URL を修正しました。
- 日本語の表現をより自然な表現に変更しました。
jQuery Ajax POST Example with PHP の他の方法
FormData オブジェクトを使用すると、フォームデータを取得して送信する際に、より簡潔なコードを書くことができます。
<form id="user-form">
...
</form>
$(function() {
$("#user-form").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type: "POST",
url: "ajax-post.php",
data: formData,
processData: false,
contentType: false,
success: function(response) {
$("#message").html(response);
}
});
});
});
$.post() メソッドは、Ajax POST リクエストを送信するための簡便な方法です。
$(function() {
$("#user-form").submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var age = $("#age").val();
$.post("ajax-post.php", {
name: name,
age: age
}, function(response) {
$("#message").html(response);
});
});
});
jQuery Deferred オブジェクトを使用する
$.ajax() メソッドは、Deferred オブジェクトを返します。Deferred オブジェクトを使用すると、通信の完了処理をより細かく制御することができます。
$(function() {
$("#user-form").submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var age = $("#age").val();
var request = $.ajax({
type: "POST",
url: "ajax-post.php",
data: {
name: name,
age: age
}
});
request.done(function(response) {
$("#message").html(response);
});
request.fail(function(jqXHR, textStatus, errorThrown) {
// エラー処理
});
});
});
javascript jquery ajax
