勉強したことのメモ

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

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

   

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

 

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

sleep(rand(1,5)); //ランダムで1秒から5秒停止
echo date('H:i:s');

 

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

var cnt = [0,1,2];

$.each(cnt, function(key, val) {
	$.ajax({
		url: 'ajax.php',
		type:'POST',
	}).done(function(data) {
		$('#result').append('<div>' + data + '</div>');
	}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
		alert("error");
	})
});

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

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

 

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

var cnt = [0,1,2];

var ajaxtest = function(opt){
	var $ajax = $.ajax(opt);
	var defer = new $.Deferred();
	$ajax.done(function(data, status, $ajax){
		defer.resolveWith(this, arguments);
	});
	$ajax.fail(function(data, status, $ajax){
		defer.resolveWith(this, arguments);
	});
	return $.extend({}, $ajax, defer.promise());
};


var ajax_list = [];
var data_array = [];
var html = '';
$.each(cnt, function(key, val) {
	var $ajax = ajaxtest({url : 'ajax.php', type:'POST'}).done(function(res, status){
		if( status === "success" ){
			data_array[data_array.length] = '<div>'+ res +'</div>';
		}else{
			console.log('error');
		}
	});
	ajax_list.push( $ajax );
});
$.when.apply(null, ajax_list).done(function(){
	$.each(data_array, function(key, val) {
		html += val;
	});

	$('#result').html(html);
});
$.when.apply(null, ajax_list).fail(function(){
	console.log('error');
});

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

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

 - jQuery, Ajax, JavaScript

  関連記事

ajaxで複数のデータを渡したい

やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...

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

やりたかった事はJavaScriptでGETのクエリを取得。 ■ソース var ...

Ajaxの負荷対策

Ajaxを使ってボタンを押した際に表示を切り替える処理。 都度Ajaxを使ってた ...

JavaScriptで画像に光沢をつける(glossy.js)

凄く簡単に光沢がつけられるライブラリがあったのでメモ。 ライブラリを呼び出してc ...

jQueryの最新バージョン呼び出しとバージョン確認

<script type="text/javascript" src="h ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...

jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

JavaScriptでdisplay:none/blockの切り替え

jQueryだとhide/show使うか、もしくは toggleだけでいいけどJ ...