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

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

##jQueryのajaxがわからなかった理由
1.ajax自体どういうものか知らない人だった。
2.jQueryのAPI見たら、ajaxのいろんな関数あるけどどれから勉強したらいい？
3.GETやPOSTを扱う場合、引数いろいろ渡さなければいけないみたいだけど、それぞれどういう意味？
callback関数って何？php側の書き方は？
わからないことがたくさんあり、一度に全部理解しきる体力がなく、とりあえず入門サイトのコードをコピペして動いたけど、結局どういうこと？
ってなってしまった。
<hr>
※私自身新人プログラマですので、書いている内容がいろいろダメな部分もあると思いますが、
ajaxがどういうものか全く感覚がつかめなかった頃の自分が
とりあえずコピペではなく、自分なりにソースコードを書けるようにはなれる内容にはしたいと思って書きました。

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

#jQuery.get()の使い方。
http://api.jquery.com/jQuery.get/
##GETを使用したサンプル

```html: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>
```

```php:sample.php
<?php
switch ($_GET['id']) {
    case 1:
        echo "田中";
        break;
    case 2:
        echo "佐藤";
        break;
    default:
        echo "なし";
        break;
}
```
![2.gif](https://qiita-image-store.s3.amazonaws.com/0/142910/454d7671-2ae1-c50e-2695-653c3d202dd7.gif)

##引数
$.get( url , data , success)

```javascript
$.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のパラメータをここで渡す。
<hr>
下の２つの例が同じ意味の値の渡し方。
例1 jQueryでGET情報を渡す。

```javascript
$.get(url, {
   id:1
}, function() {

});
```

例2 URLで値を渡す。
![スクリーンショット 2016-10-23 1.01.03.png](https://qiita-image-store.s3.amazonaws.com/0/142910/d9709d30-3d2d-3ad7-7f90-f4558e029336.png)
<hr>
パラメータが複数ある場合は以下の書き方でURLのGET情報と同じでわたせる。

```javascript
$.get(url, {
   id      :1,
   category:3,
   name    :"鈴木"
}, function() {

});
```
![スクリーンショット 2016-10-23 1.15.41.png](https://qiita-image-store.s3.amazonaws.com/0/142910/832ec6f8-6dd3-8607-12d1-ad7b51fd0b45.png)
<hr>

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

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

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

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

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

##PHPの処理
PHPでechoした値をjQueryで受け取れる。

```php
<?php
  echo "田中";
```

```javascript
$.get(url, data, function(data) {
   console.log(data);
});
```
![スクリーンショット 2016-10-23 1.47.27.png](https://qiita-image-store.s3.amazonaws.com/0/142910/35939ddb-5ca8-1d94-502e-07f4a5f7e75c.png)

###渡したいデータが複数の場合。
配列にして、jsonにする。

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

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

```javascript
$.get(url, data, function(data) {
   console.log("名前:",data.name);
   console.log("年齢:",data.age);
});
```
![スクリーンショット 2016-10-23 2.04.42.png](https://qiita-image-store.s3.amazonaws.com/0/142910/47fa109b-4eb0-9075-bdde-c48773d5d319.png)

#jQuery.post()の使い方。
http://api.jquery.com/jQuery.post/
##POSTでデータを送るサンプル
公式サイト見る限り、あまりGETと変わらなさそう?です。

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

```html: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>
```

```php: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](https://qiita-image-store.s3.amazonaws.com/0/142910/aa87be0f-c80a-e1f4-079f-27433e4c9e33.gif)

##デバッグツール
FireFoxの拡張機能のFirebugというやつを使ってみました。

###使い方
1.インストールする。
https://addons.mozilla.org/ja/firefox/addon/firebug/
2.ブラウザ右上の虫のアイコンをクリック
![スクリーンショット 2016-10-23 4.41.26.png](https://qiita-image-store.s3.amazonaws.com/0/142910/9104b8a4-15b2-6df6-9a85-b20e129722c2.png)
3.POSTの値とレスポンスの内容がわかりやすい
![5.gif](https://qiita-image-store.s3.amazonaws.com/0/142910/5397014a-ee1f-f523-c18d-fdd1e35bda3d.gif)

#.load()の使い方。
http://api.jquery.com/load/

##とりあえず動くサンプル

```html: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>
```

```html:test1.html
<ul id="sample">
    <li>東京</li>
    <li>大阪</li>
</ul>

<ul>
    <li>犬</li>
    <li>猫</li>
</ul>

<p>サンプル出力。</p>
```

```php:test2.php
<p>
    <?= $_POST["name"]; ?>さんは<?= $_POST["age"]; ?>才です。
</p>
```
![6.gif](https://qiita-image-store.s3.amazonaws.com/0/142910/a5b43c5e-b1b0-8426-a604-ca5bcb6fc103.gif)

##引数
.load(url, data, complete)

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

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

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

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

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