勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryにて複数のajax処理のレスポンスをまとめて表示する方法

   2024/02/20  jQuery JavaScript

同時に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していく形。ダメとかではないけど今回は一括で結果を表示させたい。

 

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

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');
});

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

 

参考サイト

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

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

 - jQuery JavaScript

  関連記事

jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

jQueryでドロワーメニューの作成

■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

jQueryプラグイン使用時の注意

最近lightboxが急に動かなくなったという不具合があり 調べたところけっこう ...

Ajaxを使用する際の注意

Ajaxで特にJSONPを使う際によくミスることがあるので 注意点をまとめておく ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...