第25章　jQuery - AJAXのget()およびpost()メソッドメソッド

# **jQuery - AJAXのget()およびpost()メソッド**

***

jQueryの`get()`メソッドと`post()`メソッドは、HTTPのGETまたはPOSTリクエストでサーバーからデータをリクエストするために使用されます。

## **HTTPリクエスト：GETとPOST**

クライアントとサーバー間の要求 - 応答によく使用される2つの方法は、GETとPOSTです。

* GET - 指定されたリソースからデータを要求します
* POST - 処理するデータを指定のリソースに送信します

GETは基本的にはサーバーからデータを取得（取得）するためだけに使用されます。 注： GETメソッドはキャッシュされたデータを返す可能性があります。

POSTはサーバーからデータを取得するためにも使用できます。ただし、POSTメソッドはデータをキャッシュしないため、要求と共にデータを送信するためによく使用されます。

GETとPOST、そしてこの2つの方法の違いについてもっと学ぶために、HTTPメソッドのGETとPOSTの章を読んでください。

## **$ .get()メソッド**
この`$.get()`メソッドは、HTTP GET要求を使用してサーバーからデータを要求します。
<dl>
<dt><b>構文：</b>
<dd>$.get(URL,callback);
</dl>
required URLパラメータは、リクエストしたいURLを指定します。

オプションのcallbackパラメータは、リクエストが成功した場合に実行される関数の名前です。

次の例では、この`$.get()`メソッドを使用してサーバー上のファイルからデータを取得します。

#### **例**
[sample25-1.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("demo_test.asp", function(data, status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>
```

#### **実行結果**
(Microsoft edgeブラウザでボタン押下後)

![graph25-1.png](https://i.loli.net/2019/04/23/5cbee49d83f7c.png)

<br>

## **$ .post()メソッド**
この`$.post()`メソッドは、HTTP POST要求を使用してサーバーにデータを要求します。
<dl>
<dt><b>構文：</b>
<dd>$.post(URL,data,callback);
</dl>
required URLパラメータは、リクエストしたいURLを指定します。

オプションのdataパラメータは、リクエストとともに送信するデータを指定します。

オプションのcallbackパラメータは、リクエストが成功した場合に実行される関数の名前です。

次の例では、この`$.post()`メソッドを使用してリクエストとともにデータを送信します。

#### **例**
[sample25-2.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("demo_test_post.asp",
    {
      name: "Donald Duck",
      city: "Duckburg"
    },
    function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>
```

#### **実行結果**
(Microsoft edgeブラウザでボタン押下後)

![graph25-2.png](https://i.loli.net/2019/04/25/5cc13ea65b895.png)

の最初のパラメータ`$.post()`は、リクエストしたいURL（ demo`_`test`_`post.asp）です。

それから、リクエストと一緒に送信するデータ（名前と市）を渡します。

demo`_`test`_`post.aspのASPスクリプトはパラメータを読み取り、それらを処理して結果を返します。

3番目のパラメータはコールバック関数です。最初のコールバックパラメータは要求されたページのコンテンツを保持し、2番目のコールバックパラメータは要求のステータスを保持します。

> **ヒント：** ASPファイルの外観は次のとおりです（ 
demo`_`test`_`post.asp）。

> **jQuery AJAXのリファレンス**
>>すべてのjQuery AJAXメソッドの概要については、jQuery AJAXリファレンスをご覧ください。
<a href="http://semooh.jp/jquery/api/ajax/" target="_blank">http://semooh.jp/jquery/api/ajax/<a>

content

第25章 jQuery - AJAXのget()およびpost()メソッドメソッド

第25章　jQuery - AJAXのget()およびpost()メソッドメソッド