勉強したことのメモ

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

  関連記事

GoogleMapで半径●メートルを範囲表示

GoogleMapでマーカーを立てて、そこから範囲●mもしくは●kmを円で表示さ ...

Highstockの使い方とカスタマイズ

株価などの値動きを図表とするローソク足のグラフを何らかの方法で描写したかった。調 ...

JavaScriptでURLのクエリを取得する2

直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

jQueryで電話番号チェック

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