각 하나씩 아약스 요청을 제출하십시오()

Question

아약스를 사용하여 여러 양식을 제출하려고했지만 하나씩 보내려면 첫 번째 아약스를 완료/성공한 후 두 번째 아약스를 보내야합니다. 내 스크립트는 다음과 같습니다.

<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

당신은 추가 할 수 있습니다

비동기 : 거짓

가 순차적으로 확인합니다.

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

참고 : - 비동기 : 거짓 논리적 ajaxified 요청의 동작을 거절 할 수 있습니다. 우리는 필사적으로 필사적으로 필요할 때까지 사용을 꺼립니다.

Answer 2

이 작업을 시도 할 수 있습니다 :

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