HTML・CSS JavaScript LAMP

jQueryでAjaxを使う際の基本的な書き方と応用方法をサンプル付きで解説

jQueryでAjaxを使う際の基本的な書き方と応用方法をサンプル付きで解説

皆さんはjQueryでAjax通信を使うための書き方は、ご存知でしょうか？

jQueryでAjaxを使えば、生のJavaScriptで書くよりも少ない記述量で非同期通信を実装することができるので、開発を進めやすくできます。

また、WordPressなどで非同期通信を必要とする処理を実装する場合、標準でjQueryが使えるケースがほとんどですので、使い方を覚えておくと色々と便利です。

そこで、jQueryでAjaxを使うための基本的な方法と、応用的な実装について詳しく解説していきます。

コーディングお役立ちツール

 

 

【jQuery Ajaxとは】Ajaxで出来ること

【jQuery Ajaxとは】Ajaxで出来ること

「jQuery Ajax」とは生のJavaScriptで記述する非同期通信の処理をjQueryの「jQuery.ajax()」関数を用いて簡潔に書けるようにした仕組みのことです。

Ajaxを使えば、非同期でHTTP通信を行うことができるため、Webページの特定の部分だけを更新したり、ページを遷移する必要がなくなるため、ユーザーの利便性を向上させることができるメリットがあります。

また、Ajaxの開発をローカルで行う場合は、簡単な開発であれば「Web Server for Chrome」、PHPも記述する開発の場合は「MAMP」をインストールして、Webサーバーを起動しておきましょう。

MAMPのインストール方法や設定方法については下記記事をご参考ください。

MAMPの使い方とWordPress開発のための環境設定
MAMPの使い方とWordPress開発のための環境設定

WordPressサイトの開発をしたいときに便利なMAMPと呼ばれるアプリケーションはご存知でしょうか？ MAMPはMac版とWindows版の両方が提供されていて、主にWeb開発者の人達が使うような ...

続きを見る

 

jQuery Ajaxの基本的な書き方

jQuery Ajaxの基本的な書き方

まずは、jQuery Ajaxの実装を始める前に「index.html」「jquery_ajax.text」のHTMLとTextファイルを同じ階層に用意し、基本的なHTMLタグを記述して、jQuery CDNを読み込んでおきましょう。

その後、bodyタグの最後にjQuery Ajaxの処理を記述していきます。

 

step
1HTMLファイルの用意と基本的なタグの記述

index.html

基本的な「<head>タグ」「<body>タグ」などを記述してjQueryを実行するための、準備をしておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Ajax</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
<script>
//ここにAjaxの処理を記述していきます
</script>
</body>
</html>

 

step
2Ajaxで読み込むテキストの用意

jquery_ajax.text

Ajax通信で読み込むためのTextファイルに文字列を記述しておきましょう。

Ajax通信が正常に動きました。

 

step
3</body>直前にAjaxの処理を記述

index.html

jQuery Ajaxの処理を記述して、先ほど用意したテキストファイルの文字列がアラートで表示されれば、正常に動作していることの確認ができます。

$.ajax({
    type: 'GET',
    url: 'jquery_ajax.text',
    dataType: 'text',
    success: function(data) { //リクエストが成功した場合の処理
    	alert(data);
   	},
   	error: function(error) { //リクエストが失敗した場合の処理
        console.log(error);
    }
});

 

jQuery Ajaxで使える主なオプション

typeHTT通信の種類を指定 (GET / POST)
urlリクエストを送る先のURL
timeoutタイムアウトする時間を指定 (ミリ秒)
data送信されるデータ ({key: value})
dataType応答時に受け取るデータ種類を指定 (text、html、xml、json、jsonp、script)
username認証が必要な場合の、ユーザー名を指定
password認証が必要な場合の、パスワードを指定
successリクエストが正常に行えた場合の処理を記述できます (function)
errorリクエスに失敗した場合の処理を記述できます (function)

 

jQuery AjaxでPHPにデータを渡す方法

jQuery AjaxでPHPにデータを渡す方法

非同期でPHPにデータを渡してから、何らかの処理を実行したい場合があるかと思います。

そういった場合、jQuery Ajaxを使えばPHP側にフォームなどで入力されたデータを渡すことができるので、開発の幅を広げることができます。

それでは、詳しい実装方法について見ていきましょう。

 

PHPにデータを渡してレスポンスを受け取る

PHPにデータを渡してレスポンスを受け取る

まずは、下記コードのように実装すればフォームの入力をPHP側に送信することができます。

コードの実装には「index.html」「request.php」を用意しておきましょう。

また、簡単な数字クイズが楽しめるようになっていますので、お好みで改造してみてください。

 

index.html

入力された値をPHP側に送信して、返された値によってアラートに表示される情報を変えています。

フォームの値はajaxメソッドのdataオプションにセットしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Ajax</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
<p>1+1=?</p>
<form id="request_form">
    <input type="number" name="input_num" placeholder="答えを入力してください" required="">
    <input type="submit" value="送信">
</form>
<script>
let $request_form = $('#request_form');
let $input_num = $('input[name="input_num"]');
$request_form.submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'request.php',
        dataType: 'text',
        data: {
        	'num': $input_num.val()
        },
        success: function(data) {
        	if(data == 1) {
        		alert('正解です！');
        	} else {
        		alert('不正解です！');
        	}
       	},
       	error: function(error) {
            console.log(error);
        }
    });
});
</script>
</body>
</html>

 

request.php

送信された値が条件分岐の使う値と一致していれば、「1」を返し、それ以外は「0」を返します。

<?php
    $num = htmlspecialchars( $_POST['num'] );
    if($num == 2) {
        echo 1;
    } else {
        echo 0;
    }
?>

 

非同期でメールを送信する

非同期でメールを送信する

Ajaxでメールを送信したいケースもあるかと思いますので、そちらの方法についても併せて解説します。

ちなみにローカル環境でメール送信のテストを行いたい場合は、MAMPを使いつつGmailのアプリパスワードの取得とPostfix (/private/etc/postfix/main.cf) の設定を変更する必要があります。

今回の実装では「index.html」「sned.php」と言った2つのファイルを使いますので、用意しましょう。

 

index.html

先程のクイズゲームと、ほとんどコード内容は変わりませんが、フォームの送信ボタンが押された時に「event.preventDefault()」として、ページ遷移が起こらないようにしているところがフォーム内容をPHPに送る時のポイントです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Ajax</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
<h1>お問い合わせ</h1>
<form id="request_form">
    <p>
        <span>お名前</span><br>
        <input type="text" name="input_name" required="">
    </p>
    <p>
        <span>メールアドレス</span><br>
        <input type="email" name="input_mail" required="">
    </p>
    <p>
        <span>題名</span><br>
        <input type="text" name="input_title" required="">
    </p>
    <p>
        <span>お問い合わせ内容</span><br>
        <textarea name="input_content" cols="30" rows="10" required=""></textarea>
    </p>
    <input type="submit" value="送信">
</form>
<script>
let $request_form = $('#request_form');
let $input_name = $('input[name="input_name"]');
let $input_mail = $('input[name="input_mail"]');
let $input_title = $('input[name="input_title"]');
let $input_content = $('textarea[name="input_content"]');

//フォームの送信ボタンが押された時の処理
$request_form.submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'send.php',
        dataType: 'text',
        data: {
        	'input_name': $input_name.val(),
        	'input_mail': $input_mail.val(),
        	'input_title': $input_title.val(),
        	'input_content': $input_content.val()
        },
        success: function(data) {
        	if(data == 1) {
        		alert('送信が完了しました！');
        	} else {
        		alert('送信できませんでした。');
        	}
       	},
       	error: function(error) {
            alert('エラーが起きまた。');
        }
    });
});
</script>
</body>
</html>

 

send.php

Ajaxで送信された内容を受け取り、加工した後、「mail()」関数で送信すれば完了です。

この時、Postfixの設定が正常に済んでいればメールが管理者宛に届くはずです。

「hoge@gmail.com」となっている部分は、ご自身メールアドレスに置き換えて、ご使用ください。

<?php
    $input_name = htmlspecialchars( $_POST['input_name'] );
    $input_mail = htmlspecialchars( $_POST['input_mail'] );
    $input_title = htmlspecialchars( $_POST['input_title'] );
    $input_content = htmlspecialchars( $_POST['input_content'] );

    mb_language('Japanese');
    mb_internal_encoding('UTF-8');

    //送信元を決定してメールを送信
    function sendMail($body, $subject, $sendmail){
        $header = "From: 管理者 <hoge@gmail.com>";
        mail($sendmail, $subject, $body, $header);
    }

    //管理者のメールアドレス
    $owner_adress = 'hoge@gmail.com';

    //メール送信(管理者)
    $body = "以下の内容で、お問い合わせを受け付けました。\n\n";
    $body .= "＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝\n\n";
    $body .= sprintf("【差出人】\n%s\n\n", $input_name . "\t<" . $input_mail . ">");
    $body .= sprintf("【タイトル】\n%s\n\n", $input_title);
    $body .= sprintf("【お問い合わせ内容】\n%s\n\n", $input_content);
    $body .= "＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝";
    sendMail($body, $input_title, $owner_adress);

    //メール送信(依頼者)
    $body = "この度は、お問い合わせ頂き、誠に有難うございます。\nお客様の内容は以下のように受け付けました。\n\n";
    $body .= "＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝\n\n";
    $body .= sprintf("【差出人】\n%s\n\n", $input_name . "\t<" . $input_mail . ">");
    $body .= sprintf("【タイトル】\n%s\n\n", $input_title);
    $body .= sprintf("【お問い合わせ内容】\n%s\n\n", $input_content);
    $body .= "＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝";
    sendMail($body, "管理者", $input_mail);

    //値を返す
    echo 1;
?>

 

まとめ

今回はjQueryでAjax通信を使うための基本的な方法と、PHPを組み合わせた応用方法について解説してきましたが、いかがでしたでしょうか？

Ajaxを扱えるようになれば、Web開発にサーバーサイドとの関わり方の理解も進みやすくなるかと思いますので、しっかりと勉強したおくことをオススメします。

それでは皆さん、良いjQueryライフを！

 

22万本以上の見放題作品と毎月貰える1200ポイントでお得に

無料トライアル実施中！＜U-NEXT＞

-HTML・CSS, JavaScript, LAMP

Copyright© Geek-WebSite.com , 2022 All Rights Reserved Powered by AFFINGER5.