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

Question

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

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

Answer 1

您可以为每个 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?>);
        });

}