SEO対策なら株式会社ペコプラ > Webサイト制作 > Web開発 > 【jQuery】jQueryでajax処理を実装してみる！

【jQuery】jQueryでajax処理を実装してみる！

Webサイト制作

Web開発

2017.09.25

最近の開発でphpとajaxでのデータ追加、更新〜画面への反映
という処理をよく使っていたので、
今回はWeb制作をしているとよく？使われているjQueryを用いて、
ajax通信を行う方法について実際にコーディングしつつ
記事を書いてみたいと思います。

1.jQueryとは？
2.ajaxとは？
3.実際に実装して見る【準備】
4.実際に実装して見る【実践】
5.作ったものを動かしてみる！
6.今回のまとめ！

jQueryとは？

まず初めにjQueryとは何でしょうか？
(そんなの知っているよ！という方はすみません・・。)
一般的にjQueryという言語はありません。
実際にプログラマーやデザイナーがjQueryと呼んで
使用しているものは「javascript」というプログラミング言語を
より簡単に使う為にまとめられたライブラリのことを指しています。

javascriptで一から全てコーディングすると
大変時間がかかるものをjQueryを使うことによって
非常に簡単に様々な便利機能を実装することが出来ます。

(例)
実際には以下のようなもの(ドロップダウンメニュー)があります。
(ちょっと画像だとわかりにくいですが、マウスが当たると該当の子メニューが出てきます)

上記以外にもクリックしたら画像を切り替えたり、画像をスライダーで表示したりなど
様々な機能を実装することが出来ます。

なんとなくjQueryについてご理解頂けましたでしょうか？
次は今回重要なajaxについて簡単に説明したいと思います。

さらにjQueryについて知りたい方は下記の記事も参考にしてみてください。

超初心者向け！jQueryをRPG風に解説！

まず最初に謝りたい事があります。この記事の目的は「やべぇ！急にjQuery使わないといけなくなった！でも今まで使った事ないし、かといって今か…

ajaxとは？

続いてajaxについて書いてみます。

ajaxとは「Webページとは非同期（Asynchronous）にXML形式（もしくはテキスト形式）のデータ通信を行う手法を指します。」(【gihyo.jp/dev/feature/01/jquery-ajax/0001】より抜粋)

・・ちょっとわかりづらいですよね？
（というより私はこれでよくわかりませんでした。。）

結論から簡単に言ってしまうと、
こちらからWEBブラウザ上でリクエストを送信する時に必要な一部の
情報だけを送信するので画面遷移せずに画面の一部だけ！を
更新出来る仕組みのことをです。
と結論を述べましたが実際に書いてみてもらったほうがわかりやすいと思います。

実際に実装して見る【準備】

実装に使った環境は以下になります。

max OS X
php 7
MySQL 5.3

作成するファイルはHTML・PHP・JSファイルとなります。
また、データベース内に下記のようにテーブルを作成します。
サンプルで作成したテーブル : [test]
カラム : [id][prefecture][city]

データは正直なんでもいいのですが、今回は後で使うので
県名と市名のカラムとレコードを作成しました。

因みにデータベースの作成に関しましては以下の記事で
軽く触れておりますので、ご参考程度に。
データベースの作成

これで最低限の準備は完了ですので、
早速、実装していきたいと思います。

実際に実装して見る【実践】

今回のサンプルでは選択ボックスから都道府県を選択し、
ボタンを押下するとデータベースから都道府県に対応する
市名を取得し、ajax(非同期通信)にてブラウザに表示するといった
内容になっています。

では初めに基本的な表示ページとなるHTMLファイルから作成していきたいと思います。

        
        <!--ここでjQueryのライブラリを読み込んでます。魔法の言葉です。-->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <!--今回メインのajax処理を記載したjsファイルを読み込みます。-->
        <script type="text/javascript" src="./ajax.js"></script>
        <!--記事内では触れてませんが適当にcssをあてております。-->
</pre>
<div class="head-area">
<h1 class="site-ttl">ajaxサンプルです</h1>
</div>
<div class="main-area"><main>
                <!--検索フォームを作成しています。-->
<div class="search">
<div class="search-head"><b>検索</b></div>
<form id="searchform" method="post">
<table class="search-table">
<tbody>
<tr>
<th>都道府県-選択-</th>
<td><select id="request" name="pref_name">
<option selected="selected" value=""></option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
</select></td>
</tr>
<tr>
<th></th>
<td><input id="search_button" class="submit-btn" type="submit" value="検索" /></td>
</tr>
</tbody>
</table>
</form></div>
<div id="res"></div>
</main></div>
<div class="footer-area">
            サンプルデモ@(株)ペコプラ</div>
<pre>

はい。HTMLファイルでは正直、特に何もしておりません。
ただ、必要なファイルを読み込んで、情報を表示しているだけです。

因みに、HTMLファイル内にｊQueryの処理を書くことも可能ですが、
ごちゃごちゃしてしまうのでサンプルでは別ファイルに分けています。

続いてメインのJSファイルを作成していきます。
[ajax.js]

$(function() {
  //検索ボタンがクリックされたら処理が走ります。
  $('#search_button').click(function() {
                //HTMLから受け取るデータです。
                var data = {request : $('#request').val()};
                //ここからajaxの処理です。          
                $.ajax({
                        //POST通信
                        type: "POST",
                        //ここでデータの送信先URLを指定します。
                        url: "ajax.php",
                        data: data,
                        //処理が成功したら
                        success : function(data, dataType) {
                            //HTMLファイル内の該当箇所にレスポンスデータを追加します。
                            $('#res').html(data);
                        },
                        //処理がエラーであれば
                        error : function() {
                            alert('通信エラー');
                        }
                 });
                 //submitによる画面リロードを防いでいます。
                 return false;
    });
  });

以上です。かなり短いですね。
やってることとしてはコメントの通りですが、
抜けがちで重要なのは20行目にある”return false”です。
これはブラウザのフォームでsubmitボタンを押下した時に
画面がリロードされるのを防いでおります。
(画面全体がリロードされてしまうと、画面一部だけを更新するために
ajaxを使っている意味がなくなってしまいます。)

最後にphpファイルを作成します。

<!--?php 
    //postデータを受け取る
    $ken = $_POST['request'];
    
    //受け取ったデータが空でなければ
    if (!empty($ken)) {
    
        //pdoインスタンス生成
        $pdo = new PDO ('mysql:host=localhost;dbname=local', '【ユーザー名】', '【パスワード】');
        //SQL文作成
        $sql = "select city from local.test where prefecture = '".$ken."'";
        //SQL実行
        $results = $pdo->query($sql);
        //出力ごにょごにょ
        echo '<table class="list_table">';
        echo "<tr>";
        echo "<th>市町村</th>";
        echo "</tr>";
        //データベースより取得したデータを一行ずつ表示する
        foreach ($results as $result) {
            echo "<tr>";
            echo "<td>".$result['city']."</td>";
            echo "</tr>";
        }
        echo "</table>";
    
    //空だったら
    } else {
        echo '<p id="tekito">エラー：都道府県を選択して下さい。</p>';
    }
    
?-->

上記のphpではajax通信によりリクエストを受けとり、
それをパラメーターにしてデータベースより
該当のデータを検索し返却しております。

ここまでで一通りの処理は完成です。
次の項目では作成した上記の３ファイルを使って
実際にブラウザ上から確認してみたいと思います。