LoginSignup
321

More than 5 years have passed since last update.

新人プログラマですがjQueryのajaxがわからなすぎて勉強したまとめ

Last updated at Posted at 2016-10-22

はじめに、

PHPとjQueryの基礎を勉強したのでajaxを使ってみよう!と思ったはいいものの、
最初全然わからなくてつまりまくってしまったので、ajaxの基礎(.get() .post() .load()だけ)を自分なりにまとめてみました。

jQueryのajaxがわからなかった理由

1.ajax自体どういうものか知らない人だった。
2.jQueryのAPI見たら、ajaxのいろんな関数あるけどどれから勉強したらいい?
3.GETやPOSTを扱う場合、引数いろいろ渡さなければいけないみたいだけど、それぞれどういう意味?
callback関数って何?php側の書き方は?
わからないことがたくさんあり、一度に全部理解しきる体力がなく、とりあえず入門サイトのコードをコピペして動いたけど、結局どういうこと?
ってなってしまった。



※私自身新人プログラマですので、書いている内容がいろいろダメな部分もあると思いますが、
ajaxがどういうものか全く感覚がつかめなかった頃の自分が
とりあえずコピペではなく、自分なりにソースコードを書けるようにはなれる内容にはしたいと思って書きました。

ajaxの説明。

やっぱりドットインストール様のjQuery入門のレッスン16〜20がすごくわかりやすいです!
http://dotinstall.com/lessons/basic_jquery_v2
このレッスンを10周ぐらいして基本は理解できました。(たぶん)

jQuery.get()の使い方。

GETを使用したサンプル

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ajax</title>
</head>
<body>
<h1>jquery.get()</h1>

<label>ID:<input type="number" name="name" value=""></label>
<input type="button" value="送信">
<p>名前:<span></span></p>

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {

    $("[type=button]").on("click", function() {

        $.get("sample.php", {
            id : $("[type=number]").val()
        }, function(data) {
            $("span").text(data);
        });

    });

});
</script>
</body>
</html>
sample.php
<?php
switch ($_GET['id']) {
    case 1:
        echo "田中";
        break;
    case 2:
        echo "佐藤";
        break;
    default:
        echo "なし";
        break;
}

2.gif

引数

$.get( url , data , success)

$.get("sample.php", {
       id:$("[type=number]").val()
}, function(data) {
       $("span").text(data);
});

この例だと、
urlが→"sample.php"
dataが→{ id : $("[type=number]").val() }
successが→function (data) {$("span").text(data);});

url

PHPのファイルへのURL

data

$_GETのパラメータをここで渡す。



下の2つの例が同じ意味の値の渡し方。
例1 jQueryでGET情報を渡す。
$.get(url, {
   id:1
}, function() {

});

例2 URLで値を渡す。
スクリーンショット 2016-10-23 1.01.03.png



パラメータが複数ある場合は以下の書き方でURLのGET情報と同じでわたせる。
$.get(url, {
   id      :1,
   category:3,
   name    :"鈴木"
}, function() {

});

スクリーンショット 2016-10-23 1.15.41.png


success

リクエストが成功した場合に実行されるコールバック関数。

コールバック関数というのは、データを受け取った後に実行してくれる関数という意味らしいです。

$.get(url, data, function() {
  // PHPから受け取ったデータを処理
});

PHPから受け取った値はコールバック関数のfunctionの引数に入れらるとのことなので、その内容を好きに処理する。

$.get(url, data, function(data) {
   $("span").text(data);
});

PHPの処理

PHPでechoした値をjQueryで受け取れる。

<?php
  echo "田中";
$.get(url, data, function(data) {
   console.log(data);
});

スクリーンショット 2016-10-23 1.47.27.png

渡したいデータが複数の場合。

配列にして、jsonにする。

<?php
$data = array();
$data["name"] = "佐藤";
$data["age"] = 10;

header('Content-Type: application/json; charset=utf-8');
echo json_encode($data);
$.get(url, data, function(data) {
   console.log("名前:",data.name);
   console.log("年齢:",data.age);
});

スクリーンショット 2016-10-23 2.04.42.png

jQuery.post()の使い方。

POSTでデータを送るサンプル

公式サイト見る限り、あまりGETと変わらなさそう?です。

※実用性は一切考えず、とりあえず動くサンプルです。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ajax</title>
</head>
<body>
<h1>jquery.post()</h1>
<p><label>名前<input type="text" name="name" value=""></label></p>
<p><label>電話<input type="tel" name="tel" value=""></label></p>
<p>
    <label>
        年齢
        <select name="age">
            <option value="10代">10代</option>
            <option value="20代">20代</option>
            <option value="30代">30代</option>
            <option value="40代">40代</option>
            <option value="50代">50代</option>
        </select>
    </label>
</p>
<p>
    <label><input type="radio" name="sex" value="男"></label>
    <label><input type="radio" name="sex" value="女"></label>
</p>
<p>
    <label>同意<input type="checkbox" name="doui" value="同意"></label>
</p>
<input type="hidden" name="hidden" value="隠しデータ">
<input type="button" value="登録">
<div></div>

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {

    $("[type=button]").on("click", function() {

        $.post("sample.php", {
            name    : $("input[name=name]").val(),
            tel     : $("input[name=tel]").val(),
            age     : $("select").val(),
            sex     : $("input[name=sex]:checked").val(),
            doui    : $("input[name=doui]:checked").val(),
            hidden  : $("input[name=hidden]").val()
        }, function(data) {
            $("div").text(data.message);
        });

    });

});
</script>
</body>
</html>
sample.php
<?php
// 受け取った値を好きに処理する。
$name   = $_POST["name"];
$tel    = $_POST["tel"];
$age    = $_POST["age"];
$sex    = $_POST["sex"];
$doui   = $_POST["doui"];
$hidden = $_POST["hidden"];

if($doui == null){
    $data["message"] = "同意してください。";
}else{
    $data["message"] = "登録しました。";
}

header('Content-Type: application/json; charset=utf-8');
echo json_encode($data);

3.gif

デバッグツール

FireFoxの拡張機能のFirebugというやつを使ってみました。

使い方

1.インストールする。
https://addons.mozilla.org/ja/firefox/addon/firebug/
2.ブラウザ右上の虫のアイコンをクリック
スクリーンショット 2016-10-23 4.41.26.png
3.POSTの値とレスポンスの内容がわかりやすい
5.gif

.load()の使い方。

とりあえず動くサンプル

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ajax</title>
</head>
<body>
<h1>.load()</h1>

<input type="button" value="サンプル1">
<input type="button" value="サンプル2">
<input type="button" value="サンプル3">
<div id="result"></div>

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function() {

        // htmlを全て読み込む
        $("[type=button]:eq(0)").on("click", function() {
            $( "#result" ).load( "test1.html", function() {
                $("#sample").css("color", "blue");
            });
        });

        // htmlの#sampleとpタグのみを読み込む
        $("[type=button]:eq(1)").on("click", function() {
            $( "#result" ).load( "test1.html #sample, p", function() {
                $("#sample").css("color", "blue");
            });
        });

        // POST送信もできる
        $("[type=button]:eq(2)").on("click", function() {
            $( "#result" ).load( "test2.php", { name: "村田", age: 25 }, function() {
                alert( "読み込みました。" );
            });
        });

    });
</script>
</body>
</html>
test1.html
<ul id="sample">
    <li>東京</li>
    <li>大阪</li>
</ul>

<ul>
    <li></li>
    <li></li>
</ul>

<p>サンプル出力。</p>
test2.php
<p>
    <?= $_POST["name"]; ?>さんは<?= $_POST["age"]; ?>才です。
</p>

6.gif

引数

.load(url, data, complete)

$( "#result" ).load( "test2.php", { name: "村田", age: 25 }, function() {
   alert( "読み込みました。" );
});

この例だと、
urlが→"test2.php"
dataが→{ name: "村田", age: 25 }
completeが→function() {alert( "読み込みました。" );});

url

読み込みたいファイルのパス

data

公式サイトによるとPOSTの値を渡せるらしい、
私は使ったことがないのですが。

complete

要求が完了したときに実行されるコールバック関数。



いろいろなサイトを参考にさせていただきました。ありがとうございました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
321