Send ajax request one by one with each ()

Question

I tried to submit several forms using ajax, but as I submit one by one, I mean send the first ajax after completion / success, and then send the second ajax, below is my script:

<form>
 <input type="text" name="name" value="john doe" size="60">
 <input type="text" name="age" value="23" size="2">
</form>

<form>
 <input type="text" name="name" value="Alex" size="60">
 <input type="text" name="age" value="24" size="2">
</form>

<button>Submit</button>


<script>
function post_form_data(data) {
    $.ajax({
        type: 'POST',
        url: 'https://members.lelong.com.my/Auc/Member/Feed/feed.asp',
        data: data,
        success: function () {
            console.log('Success');
        },
        error: function () {
            console.log('error');   
        }
    });
}

$('button').on('click', function () {
    $('form').each(function () {
        post_form_data($(this).serialize());
    });
});
</script>

Answer 1

You can add

async: false

to make it consistent.

$.ajax({
    type: 'POST',
    url: 'https://members.lelong.com.my/Auc/Member/Feed/feed.asp',
    data: data,
    async :false ,
    success: function () {
        console.log('Success');
    },
    error: function () {
        console.log('error');   
    }
});

Note. - async: false can logically reject the behavior of an ajaxified request. We discourage its use until it is desperate.

Answer 2

You can try the following:

function post_form_data(data,cache,i) {
    $.ajax({
        type: 'POST',
        url: 'https://members.lelong.com.my/Auc/Member/Feed/feed.asp',
        data: data,
        success: function () {
            console.log('Success');
            i++;
            post_form_data(cache.eq(i).serialize(),_cached,i);
        },
        error: function () {
            console.log('error');   
        }
    });
}

$('button').on('click', function () {

  var _cached=$('form');
  post_form_data(_cached.eq(0).serialize(),_cached,0);

});

Answer 3

, done/then or always:

function post_form_data(data) {
    return $.ajax({
        type: 'POST',
        url: '/echo/html',
        data: data,
        success: function () {
            console.log('Success');
        },
        error: function () {
            console.log('error');
        }
    });
}

$('button').on('click', function () {
    var requests = $('form').map(function () {
        return $(this).serialize();
    }).get();
    var i = 0;
    if (requests.length) {
        makeRequest(requests, i);

    }
});

function makeRequest(requests, i) {
    var iPromise = post_form_data(requests[i]);
    if (i < requests.length - 1) {
        iPromise.done(makeRequest(requests, ++i))
    }
}