如何使用一个提交按钮一个接一个地发布ajax？

我创建了一些调用ajaxpost的代码。 有时过程的顺序是正确的，有时则不是。 我想要一个总是有正确顺序的ajaxpost，从函数1到函数4.每个函数都有不同的表单值，所以我真的需要修复它。 任何人都可以查看我的代码吗？

 $(document).ready(function () { $('#unggah').submit(function (event) { //FUNCTION 1 this.reset(); $('#loading').show(); var formData = { 'tahun': $('input[name=tahun]').val(), 'jurusan': $('input[name=jurusan]').val(), 'posisi': $('input[name=posisi1]').val(), 'tabel': $('input[name=tabel]').val() }; $.ajax({ type: 'POST', url: 'operator_pt/unggah/', data: formData, Async:false, dataType: 'json', encode: true }) .done(function (data1) { console.log(data1); }) .fail(function (data1) { console.log(data1); }); event.preventDefault(); //FUNCTION 2 var formData2 = { 'tahun': $('input[name=tahun]').val(), 'jurusan': $('input[name=jurusan]').val(), 'posisi': $('input[name=posisi2]').val(), 'tabel': $('input[name=tabel]').val() }; $.ajax({ type: 'POST', url: 'operator_pt/unggah/', data: formData2, Async:false, dataType: 'json', encode: true }) .done(function (data2) { console.log(data2); }) .fail(function (data2) { console.log(data2); }); event.preventDefault(); //FUNCTION 3 var formData3 = { 'tahun': $('input[name=tahun]').val(), 'jurusan': $('input[name=jurusan]').val(), 'posisi': $('input[name=posisi3]').val(), 'tabel': $('input[name=tabel]').val() }; $.ajax({ type: 'POST', url: 'operator_pt/unggah/', data: formData3, Async:false, dataType: 'json', encode: true }) .done(function (data3) { console.log(data3); }) .fail(function (data3) { console.log(data3); }); event.preventDefault(); // FUNCTION 4 var formData4 = { 'tahun': $('input[name=tahun]').val(), 'jurusan': $('input[name=jurusan]').val(), 'posisi': $('input[name=posisi4]').val(), 'tabel': $('input[name=tabel]').val() }; $.ajax({ type: 'POST', url: 'operator_pt/unggah/', data: formData4, Async:false, dataType: 'json', encode: true }) .done(function (data4) { console.log(data4); }) .fail(function (data4) { console.log(data4); }); event.preventDefault(); }); });  

Answer 1

你可以为每个ajax请求编写单独的函数，并从另一个成功函数中调用一个函数。

 function callAjax3(){ var formData3 = { 'tahun': $('input[name=tahun]').val(), 'jurusan': $('input[name=jurusan]').val(), 'posisi': $('input[name=posisi3]').val(), 'tabel': $('input[name=tabel]').val() }; $.ajax({ type: 'POST', url: 'operator_pt/unggah/', data: formData3, dataType: 'json', encode: true }) .done(function (data3) { console.log(data3); callAjax4() // calling 4th function }) .fail(function (data3) { console.log(data3); }); } function callAjax2(){ //FUNCTION 2 var formData2 = { 'tahun': $('input[name=tahun]').val(), 'jurusan': $('input[name=jurusan]').val(), 'posisi': $('input[name=posisi2]').val(), 'tabel': $('input[name=tabel]').val() }; $.ajax({ type: 'POST', url: 'operator_pt/unggah/', data: formData2, dataType: 'json', encode: true }) .done(function (data2) { console.log(data2); callAjax3(); // calling 3rd function }) .fail(function (data2) { console.log(data2); }); } 

Answer 2

您可以将每个ajax调用嵌套在前一个的done（）函数中。 这样，第n + 1次呼叫将仅在第n次呼叫完成（成功）后发生。

例如

 $.ajax({data}).done(function() { $.ajax({data}).done(function() {...}) }) 

Answer 3

你的.done(在请求成功完成后调用回调。

在.done(发出第二个请求.done(第一个回调，第三个请求 – 第二个请求的.done(回调等）

这将确保正确的通话顺序。

……这就是他们所说的金字塔的厄运

Answer 4

如果我已正确理解您的查询，那么您正在寻找一种方法在单个提交按钮单击上提交2个表单。

您可以通过在第一个表单的ajax调用成功使用jquery .submit（）方法手动提交第二个表单来实现此目的。

如果您需要更新代码，请告诉我。