読者です 読者をやめる 読者になる 読者になる

ajax通信時に実行順序を保証する

複数のフォームをajax通信で送信するという処理をつくった際に、非同期通信がほぼ同時に行われて処理の順序が動作ごとに異なったため、1つ目のフォームの処理が完了したら2つ目の処理がはじまるという形式に書き直した時のメモです。

$(function(){
    $("#submit").click( function() {
        event.preventDefault();
        var form = $(".form");
        var length = form.length;
        var index = 0;
        var post = function() {
            var formData = new FormData(form[index]);
            $.ajax({
                method: 'POST',
                url: '/users/edit',
                processData: false,
                contentType: false,
                data: formData,
                success: function() {
                    index++;
                    if (index < length) {
                        post();
                    }
                }
            })
        }
        post();
    });
});

参考