[PHP,JS] AjaxでJSONを返す

フロントでサーバにアクセスしてJSONを取得して、ページに表示する。

全てのAPIの基礎中の基礎になっている部分だ。

今回は必要最小限でそれを実装してみた。

サンプルコード


 

 

解説


index.htmlは不要だと思うので省略する。

main.jsでAjax通信を行う

ajaxの通信をjQueryを使って行なっている。

jQueryでのajaxはメソッドチェーンを使っていて、感覚的にわかりやすい

 

doneでサーバから返却された値を引数にするコールバック関数を実行して、DOMを構築している。

もし、エラーが発生したら、failのコールバック関数が実行される

引数は以下の通り

引数 説明
jqXHR $.ajax()が返すプロミスオブジェクト
textStatus 通信のステータスを表す文字列
errorThrown エラーの意味を表す文字列

products.phpでJSONデータを返す

PHPでJSONを返却するときにはjson_encode関数を使って辞書配列をJSONデータに変換する必要がある。

 

第一引数には変換したい配列データを入れる。

第二引数には変換する際のオプションを設定する。

今回の引数は以下の通り

変数 説明
JSON_UNESCAPED_SLASHES スラッシュをエスケープしない
JSON_UNESCAPED_UNICODE 文字列をUnicodeにエスケープしない

JSON_UNESCAPED_SLASHESによって、文字列内に”/”が含まれるHTMLのDOMデータをエスケープしなくなる。

JSON_UNESCAPED_UNICODEによって、文字列をUnicode文字に変換しなくなる。

変換したら、後は標準出力してやるだけ

ここで気をつけるのはヘッダー情報にJSONで返すことを明記しておくこと。

ajaxでデータを受け取る型をJSONにいるから、こちらも合わせておかないといけない。

そして最後に標準出力メソッドのechoでJSONデータを返して終わり。


タグ:

[PHP,JS] AjaxでJSONを返す

フロントでサーバにアクセスしてJSONを取得して、ページに表示する。

全てのAPIの基礎中の基礎になっている部分だ。

今回は必要最小限でそれを実装してみた。

サンプルコード


 

 

解説


index.htmlは不要だと思うので省略する。

main.jsでAjax通信を行う

ajaxの通信をjQueryを使って行なっている。

jQueryでのajaxはメソッドチェーンを使っていて、感覚的にわかりやすい

 

doneでサーバから返却された値を引数にするコールバック関数を実行して、DOMを構築している。

もし、エラーが発生したら、failのコールバック関数が実行される

引数は以下の通り

引数 説明
jqXHR $.ajax()が返すプロミスオブジェクト
textStatus 通信のステータスを表す文字列
errorThrown エラーの意味を表す文字列

products.phpでJSONデータを返す

PHPでJSONを返却するときにはjson_encode関数を使って辞書配列をJSONデータに変換する必要がある。

 

第一引数には変換したい配列データを入れる。

第二引数には変換する際のオプションを設定する。

今回の引数は以下の通り

変数 説明
JSON_UNESCAPED_SLASHES スラッシュをエスケープしない
JSON_UNESCAPED_UNICODE 文字列をUnicodeにエスケープしない

JSON_UNESCAPED_SLASHESによって、文字列内に”/”が含まれるHTMLのDOMデータをエスケープしなくなる。

JSON_UNESCAPED_UNICODEによって、文字列をUnicode文字に変換しなくなる。

変換したら、後は標準出力してやるだけ

ここで気をつけるのはヘッダー情報にJSONで返すことを明記しておくこと。

ajaxでデータを受け取る型をJSONにいるから、こちらも合わせておかないといけない。

そして最後に標準出力メソッドのechoでJSONデータを返して終わり。

タグ: