勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

複数のajax処理の結果をまとめて表示

      2018/06/04

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばAという処理のBという処理を行う場合は何も考えずに書くとAのajax処理成功後にネストして書くことになる。さらにCという処理を追加するとなると非常に見づらいコードになる。また、AとBとCを同時にajax通信を行った場合にどの処理が最初に返ってくるか分からないといったケースもある。そういった場合の対処法をメモ。

 

ajax通信を受けて日時を返すページ(ajax.php)

 

何も考えずに書いたパターン

結果が出たらappendしていく形。ダメとかではないけど今回は一括で結果を表示させたい。尚、実際の動きは以下ページで見られる。

http://sample.taitan916.info/ajax/

 

まとめて処理するパターン

全ての結果が出てからまとめて表示させる。実際の動きは以下ページで見られる。

http://sample.taitan916.info/ajax/index2.php

今回は結果を表示するだけなのでdata_arrayのように配列にする必要はないけど、結果を受け取ってjavascript側で何らかの処理をする場合は配列の方が便利。

 

参考サイト

https://www.psi-net.co.jp/blog/?p=1125

https://qiita.com/YusukeHirao/items/bca14c5f2fe4026fd4d7

 - Ajax, javascript, jQuery

  関連記事

jquery_logo
jQueryでjsonデータを処理(parseJSON)

他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...

jquery_logo
jQueryでチェックボックスの全チェック&チェック解除

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

jquery_logo
jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

jquery_logo
jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

javascript_logo_unofficial-300x300
javascriptのfor文で負荷軽減

javascriptで配列の数だけループをまわす際、 for (i=0; i&l ...

javascript_logo_unofficial-300x300
JavaScriptで特定の範囲内から整数値を、数値が被らずにランダムに取り出す

やりたかったのは1位から20位のランキング内で JavaScriptを用いてラン ...

javascript_logo_unofficial-300x300
JavaScriptでフォームの禁止ワード制限

掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...

jquery_logo
テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

javascript_logo_unofficial-300x300
javascriptのtry文

javascriptとかjQueryを使ってて、Firefox,chromeはい ...

jquery_logo
jQueryで電話番号チェック

やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...