如何使用一个提交按钮一个接一个地发布ajax? [英] How to post ajax one after another with one submit button?

问题描述

我已经创建了一些调用ajax发布的代码.有时流程的顺序正确，有时不正确.我希望从功能1到功能4的ajax帖子始终具有正确的顺序.每个功能都有不同的形式值，因此我确实需要对其进行修复. 任何人都可以查看我的代码吗?

I have created some code that call ajax post. Sometime the order of process are right, sometime aren't. I want ajax post that always have the right order, from function 1 to function 4. Every function has different form value, so I really need to fix it. Can anyone look into my code ?

<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请求编写单独的函数，然后从另一个成功函数中调用一个.

you can write separate function for each ajax request and call one from another's success function.

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

}

这篇关于如何使用一个提交按钮一个接一个地发布ajax?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！