fetchを利用する[GET][POST]

2019年1月16日

Fetch APIを利用してGETおよびPOSTメソッドによるAjax通信をおこなってみます。

 

GET


index.html上のフォームからtest-get.phpに値を渡して処理し、index.htmlの<div id=”result”></div>に返ってきた値を表示させています。

 

index.html

25〜37行目

fetch()はpromiseを返します。処理が正常に実行されるとthenが実行されます。Responseオブジェクト(上記ではresponse)にはリクエストして返ってきたレスポンスメッセージ(HTTPレスポンス)が含まれています。例えばResponseオブジェクトのheadersプロパティでHTTPヘッダーの情報を確認できます(27、28行目)。

 

test-get.phpからはレスポンスとしてテキストデータが返ってきます。Responseオブジェクトのtext()メソッドでレスポンスボディにアクセスし、2番目のthen(32行目)でその具体的なデータを処理しています。もしJSONが返ってくるならばjson()を利用します。

 

関連ページ

Promiseによる非同期処理

 

test-get.php

POSTおよびGETメソッドについては下記関連ページをご覧下さい。

 

関連ページ

入力フォームを作成しデータを次の画面に送る [POSTメソッド][GETメソッド]

 

 

 

POST


フォームからPOSTで値を送ります。

 

index.html

24、25行目

リクエストのための情報をオプションとして設定しています。methodパラメータには POST、PUT、DELETEなどの様々なリクエストを設定できます。デフォルトではGETに設定されています。bodyパラメータにはリクエストボディーを設定します。

 

もしJSONデータをPOSTする場合には下記のようにオプションを設定します。

 

 

test-post.php

 

 

 

参照文献


 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー