[英]How to post ajax one after another with one submit button?
我創建了一些調用ajax發布的代碼。 有時流程的順序正確,有時不正確。 我希望從功能1到功能4的ajax帖子始終具有正確的順序。每個功能都有不同的形式值,因此我確實需要對其進行修復。 誰能看看我的代碼?
<script>
$(document).ready(function () {
$('#unggah<?php echo $mhs?>').submit(function (event) {
//FUNCTION 1
this.reset();
$('#loading<?php echo $mhs?>').show();
var formData = {
'tahun': $('input[name=tahun<?php echo $mhs?>]').val(),
'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(),
'posisi': $('input[name=posisi1<?php echo $mhs?>]').val(),
'tabel': $('input[name=tabel<?php echo $mhs?>]').val()
};
$.ajax({
type: 'POST',
url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>',
data: formData,
Async:false,
dataType: 'json',
encode: true
})
.done(function (data1<?php echo $mhs?>) {
console.log(data1<?php echo $mhs?>);
})
.fail(function (data1<?php echo $mhs?>) {
console.log(data1<?php echo $mhs?>);
});
event.preventDefault();
//FUNCTION 2
var formData2 = {
'tahun': $('input[name=tahun<?php echo $mhs?>]').val(),
'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(),
'posisi': $('input[name=posisi2<?php echo $mhs?>]').val(),
'tabel': $('input[name=tabel<?php echo $mhs?>]').val()
};
$.ajax({
type: 'POST',
url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>',
data: formData2,
Async:false,
dataType: 'json',
encode: true
})
.done(function (data2<?php echo $mhs?>) {
console.log(data2<?php echo $mhs?>);
})
.fail(function (data2<?php echo $mhs?>) {
console.log(data2<?php echo $mhs?>);
});
event.preventDefault();
//FUNCTION 3
var formData3 = {
'tahun': $('input[name=tahun<?php echo $mhs?>]').val(),
'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(),
'posisi': $('input[name=posisi3<?php echo $mhs?>]').val(),
'tabel': $('input[name=tabel<?php echo $mhs?>]').val()
};
$.ajax({
type: 'POST',
url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>',
data: formData3,
Async:false,
dataType: 'json',
encode: true
})
.done(function (data3<?php echo $mhs?>) {
console.log(data3<?php echo $mhs?>);
})
.fail(function (data3<?php echo $mhs?>) {
console.log(data3<?php echo $mhs?>);
});
event.preventDefault();
// FUNCTION 4
var formData4 = {
'tahun': $('input[name=tahun<?php echo $mhs?>]').val(),
'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(),
'posisi': $('input[name=posisi4<?php echo $mhs?>]').val(),
'tabel': $('input[name=tabel<?php echo $mhs?>]').val()
};
$.ajax({
type: 'POST',
url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>',
data: formData4,
Async:false,
dataType: 'json',
encode: true
})
.done(function (data4<?php echo $mhs?>) {
console.log(data4<?php echo $mhs?>);
})
.fail(function (data4<?php echo $mhs?>) {
console.log(data4<?php echo $mhs?>);
});
event.preventDefault();
});
});
</script>
您可以將每個ajax調用嵌套在上一個的done()函數中。 這樣,第n + 1個調用將僅在第n個調用完成(成功)之后發生。
例如
$.ajax({data}).done(function() {
$.ajax({data}).done(function() {...})
})
您可以為每個ajax請求編寫單獨的函數,然后從另一個成功函數中調用一個。
function callAjax3(){
var formData3 = {
'tahun': $('input[name=tahun<?php echo $mhs?>]').val(),
'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(),
'posisi': $('input[name=posisi3<?php echo $mhs?>]').val(),
'tabel': $('input[name=tabel<?php echo $mhs?>]').val()
};
$.ajax({
type: 'POST',
url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>',
data: formData3,
dataType: 'json',
encode: true
})
.done(function (data3<?php echo $mhs?>) {
console.log(data3<?php echo $mhs?>);
callAjax4() // calling 4th function
})
.fail(function (data3<?php echo $mhs?>) {
console.log(data3<?php echo $mhs?>);
});
}
function callAjax2(){
//FUNCTION 2
var formData2 = {
'tahun': $('input[name=tahun<?php echo $mhs?>]').val(),
'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(),
'posisi': $('input[name=posisi2<?php echo $mhs?>]').val(),
'tabel': $('input[name=tabel<?php echo $mhs?>]').val()
};
$.ajax({
type: 'POST',
url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>',
data: formData2,
dataType: 'json',
encode: true
})
.done(function (data2<?php echo $mhs?>) {
console.log(data2<?php echo $mhs?>);
callAjax3(); // calling 3rd function
})
.fail(function (data2<?php echo $mhs?>) {
console.log(data2<?php echo $mhs?>);
});
}
如果我正確理解了您的查詢,那么您正在尋找一種方法,只需單擊一次提交按鈕即可提交2個表格。
您可以通過在第一個表單的ajax調用成功后使用jquery .submit()方法手動提交第二個表單來實現此目的。
讓我知道您是否需要更新的代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.