Question

我创建了一些调用ajax帖子的代码。有时过程的顺序是正确的，有时则不是。我想要一个总是有正确顺序的ajax帖子，从功能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调用嵌套在前一个的done（）函数中。这样，第n + 1次调用只会在第n次调用完成（成功）后发生。

e.g。

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

Answer 2

请求成功完成后，将调用.done(回调。

在第一个请求的.done(回调中提出第二个请求，第三个请求 - 在第二个请求的.done(回调等中

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

......那就是他们所谓的Pyramid of doom

Answer 3

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

}

Answer 4

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

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

如果您需要更新代码，请与我们联系。

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

4 个答案: