PHPとの間でAjax通信をおこなう[jQuery][post][done/fail/always]

2016年3月29日

jQueryを利用してPHPにデータをPOSTし、Ajax通信をおこないます。

 

HTTPS化に伴い、現在本記事内のデモ画面は利用できない状態です。

デモ画面

 

ajax.html(デモ画面)

 

6行目

jQueryのバージョンはHosted Librariesを参照。

 

26〜34行目

$.ajax関数を利用して、非同期通信を実行しています。汎用的な$.ajax関数の代わりに、35行目のPOST形式専用$.post関数を利用することもできます。オプション(上記コードのtypeやurlの部分)に関しては公式ページ等をjQuery.ajax() をご覧下さい。

 

33行目

dataType

 

返ってくるデータの型を指定します。デモ画面ではPHP(test.php)からHTMLが返ってくるので、htmlを指定しています。もしtest.phpの8行目のようにJSON形式で返ってくる場合には、「dataType: ‘json’」のように指定します。このdataTypeオプションを指定しない場合(デフォルト)は自動で形式を判定してくれます。

 

36行目

done

 

Ajax通信が正常におこなわれた場合に呼ばれます。コールバック関数の引数dataにはPHPから返ってきたデータが入ります。デモ画面ではPHPからHTML形式が返ってきますが、もしtest.phpの8行目のようにJSON形式で返ってくる場合には、38行目のように処理をおこないます。

 

40行目

fail

 

Ajax通信がエラーの場合に呼ばれます。

 

43行目

always

 

Ajax通信が正常およびエラーいずれの場合も完了時に呼ばれます。

 

 

test.php(※下記コードはセキュリティ等の考慮はしていません。)

 

 

 

関連ページ

JSONPをjQueryで利用する[Ajax][カーリルAPI]

 

Ajax通信の処理状況を判定する[ajaxStart][ajaxStop]

 

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

 

 

参照ページ


 

jQuery.ajax() 

 

 

 

LINEで送る
Pocket

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