LABO IWASAKI

JqueryでAjax入門

Jquery - Ajax

使い方を覚えるとかなり便利なAjax
初めは難しく感じるけど実は結構簡単です。
使うとAjaxなしではもうやってられません。

Jqueryのセレクタも別ページで紹介。
JqueryとかAjaxとか本当に便利。
こういうの考えた人って天才なんだろな…

Jqueryを読み込む

Jquery

まずJqueryを読み込みます。
バージョンとか色々あるけど2系だと古いIEでは動きません。自分のサイトに合ったものを読み込みましょう。
現在はもうバージョン3になってます。(IE8以下はサポートなし)

ファイルをサーバーに置いて読み込む
<script src="../js/jquery-3.1.1.min.js"></script>

直接読み込む場合
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

ダウンロードはここ→Jqueryダウンロードサイトから可能です。
ウチももぅ3にしてまおうかな…。IEは無視しよう。
ちなみに、3系からは「slim build」というモノがあります。ajaxを使わない場合はこちらが軽量なのでオススメです。

HTMLの準備

HTML

さて、では早速Ajaxを書いてみましょう。
Ajaxを書く前にHTMLを用意しておく必要があります。とても簡単です。

<body>

  <h1>Ajaxを試す</h1>
  <p>ここにコンテンツなどがあるとします</p>

  <div class="test"></div>

</body>

上記の「div class="test"」を入れておいてください。
ここにAjaxで行った実行結果を反映するという事になります。

ボタンの設置

Button

では簡単なAjaxを動かしてみましょう。
さっきのHTMLにちょっとだけ追加します。ボタンを押したらAjaxが実行されるようにしてみましょう。

<body>

  <h1>Ajaxを試す</h1>
  <p>ここにコンテンツなどがあるとします</p>

  <p class="button" onclick="test()">ボタンA</p>

  <div class="test"></div>

</body>

「ボタンA」を追加しました。「onClick="test()"」と、してあります。
次に、この「p class="button"」をクリックしたらAjaxが動くようにJavascriptで命令を書きます。

命令を書きます

Javascript

いよいよ命令部分です。
さっきのようにJqueryを読み込んで、その下にJavascriptで命令を書いてあげます。

<body>

  <h1>Ajaxを試す</h1>
  <p>ここにコンテンツなどがあるとします</p>

  <p class="button" onclick="test()">ボタンA</p>

  <div class="test"></div>


<script src="../js/jquery-3.1.1.min.js"></script>
<script>
function test(){
  var param = "実行したテキスト";
  $.post(
    "./ajax/test.php",
    {
    id:param,
    },
      function( data ) {
        $( ".test" ).html( data );
      } );
}
</script>


</body>

まず説明しやすいようにバラして書きます。
なんか難しそうに見えるかも知れませんが、書き方をまとめるととてもシンプルになります。


function test(){
  var param = "実行したテキスト";
  $.post( "./ajax/test.php", { id:param, }, function( data ) { $( ".test" ).html( data ); } );
}

何をやってるかっていうと

var param = "実行したテキスト"; … paramって変数に文字列を代入
$.post … JqueryでPOSTする
"./ajax/test.php", … このファイルを実行
{ id:param, } … idparamの内容を入れる
$( ".test" ).html( data ); … 「div class="test"」に実行結果を入れるよ

…と、こういう内容になります。
HTMLだとformを使って画面遷移しないと無理な事ですね。

ファイルを作る

Files

では、さっき指定した「test.php」をフォルダ「ajax」に用意しましょう。 phpファイルを用意してAjaxでphpを実行します。

<?php

$str1 = $_POST["id"];

$str2 = "ここに表示";

$str3 = $str1.$str2;

echo $str3;

?>

まぁ、こんな使い方はしないと思いますが例として…。
Ajaxで文字列を受け取って、文字列を連結してechoしています。
つまりこれが、さっきの「div class="test"」に表示されれば成功です。

動かしてみよう

Let's Try

こういう動きになれば成功です。
押してみてください。「実行したテキストここに表示」と出るはずです。
(IE8以上のモダンブラウザのみ)

ボタンA

この下に「div class="test"」があります。

AjaxでForm

Form

フォームの値を扱う場合は以下のようにします。

<form action="./ajax/form.php" id="form" method="POST">

  <input type="number" name="price" placeholder="金額" />
  <input type="number" name="zei" placeholder="税率" />
  <input type="submit" name="go" id="submit" onclick="basic_form()" value="計算" />

</form>

金額と税率を入れて計算するphpを実行してみましょう。
実行ファイルは1行目の「action」で指定しています。
「input type="submit"」「id="submit"」も付加します。

<script>

function basic_form(){
    $('#form').submit(function(event) {
        event.preventDefault();
        var cstr = ".test2"; var $form = $(this); var $button = $form.find('#submit');
        $.ajax({ url: $form.attr('action'),type: $form.attr('method'),data: $form.serialize() + '&delay=1',timeout: 10000,
        beforeSend: function(xhr, settings) { $button.attr('disabled', true); },
        complete: function(xhr, textStatus) { $button.attr('disabled', false); },
        success: function(data) { $form[0].reset(); $( cstr ).html( data ); },
        error: function(xhr, textStatus, error) { alert('ERROR'); }
        });
    });
}

</script>

重要なのは4行目「$('#form').submit(function(event) {」の部分。
これはフォームのidです。

細かく書くと以下のようになります。

<script>

function basic_form(){

    $('#form').submit(function(event) {

        event.preventDefault();// HTMLでの送信をキャンセル
        var cstr = ".test2";//結果を表示させる場所
        var $form = $(this);// 操作対象のフォーム要素を取得
        var $button = $form.find('#submit');// 送信ボタンを取得(後で使う: 二重送信を防止する。)

        $.ajax({// 送信
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: $form.serialize(),

        beforeSend: function(xhr, settings) {// 送信前
            $button.attr('disabled', true);// ボタンを無効化し、二重送信を防止
        },

        complete: function(xhr, textStatus) {// 応答後
            $button.attr('disabled', false);// ボタンを有効化し、再送信を許可
        },

        success: function(data) {// 通信成功時の処理
            $form[0].reset();// 入力値を初期化
            $( cstr ).html( data );
        },

        error: function(xhr, textStatus, error) {// 通信失敗時の処理
            alert('ERROR');
        }
        });
    });
}


</script>

phpのファイルも用意しましょう。

<?php

$price = $_POST["price"];
$zei = $_POST["zei"];


  $total_zei = $price * $zei / 100;
  $total = $price + $total_zei;
  $total = number_format($total);


  echo '金額:'.$price.' 円
'; echo '税率:'.$zei.' %
'; echo '税額:'.$total_zei.' 円

'; echo '合計'.$total.' 円'; ?>


次回はまとめます

Next...

どうでしたか?
思ったより簡単だったでしょ?
僕はプログラムは全部独学なんですが、Ajaxの学び初めは苦労しました。
その時にこういう記事を読みたかったので、今になって、これから学ぶ人達のために残しておこうと思ったんです。
ま、自己満足ですね。

Ajaxする時よく使うモノをまとめた。
「JavascriptやJqueryの便利セレクター」

LINEスタンプと着せ替えをプロに描いてもらいました。
見るだけ見ていってください!
そして誰かに紹介してください!
あわよくば買ってください。m(_ _)m

着せ替え → 結構人気の可愛いLINE着せ替え
スタンプ → 夢日記公式キャラ夢ひつじのLINEスタンプ

おすすめ → 現役エンジニアのオンライン家庭教師CodeCamp