勉強したことのメモ

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で高速化

高速化について調べる機会があったのでメモ。 ------ ・セレクタはclass ...

3Dデータ(obj,stlファイル)をブラウザ上で表示する方法  

3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...

POP広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

tableのヘッダーを残して表示(jquery-decapitate)

bootstrapはあまり使わないので切り離して使えるように したいところ。 ■ ...

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

prototypeとjqueryの競合

ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...

クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...