Javascript 在上一个ajax成功后执行ajax php

我正在创建一个HTML表单，用户在其中填写信息并上传自己的图像。为此，我编写了两个单独的ajax函数：1）上载图像，2）提交表单（在表单经过正确验证后）并将其插入sql数据库

我已经让每个函数单独工作，但我无法让它们一起工作。我的意思是，我只想在正确上传图像的情况下将数据插入SQL DB；由于各种原因，图像上载失败，包括文件大小和文件类型过大

执行上载操作的脚本：

// upload the image
    $(document).ready(function (e){
        $("#uploadForm").on('submit',(function(e){
            document.getElementById("submit").disabled = true; // disable submit button so user doesn't press it again
            e.preventDefault();
            $.ajax({
                url: "upload.php?" + rand,
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                processData:false,
                success: function(d) {
                    console.log("image properly uploaded");
                },
                complete: function(data){
                }
            });
        }));
    });

执行表单验证并将数据插入SQL的脚本

// submit the form data
        $(function() {
            $(".form-horizontal").find("input,textarea,select").jqBootstrapValidation({
                preventSubmit: true,
                submitError: function($form, event, errors) { // if error
                    console.log("submit error")
                },
                submitSuccess: function($form, event) { // if success
                    if($('#form input').val() == '') { // if honeypot div is empty when submit is pressed, then this is a human
                        console.log("form is filled out properly")

                        var genderSelect = document.getElementById("gender");
                        var raceSelect = document.getElementById("race");
                        var gender = genderSelect.options[genderSelect.selectedIndex].value;
                        var race = raceSelect.options[raceSelect.selectedIndex].value;
                        var email = $("input#email").val();
                        var phone = $("input#phone").val();
                        var dob = $("input#dob").val();
                        var skill = $("input#skill").val();
                        var fn = $("input#fn").val();
                        var ln = $("input#ln").val();
                        var photo = document.getElementById('photo').value.split(/(\\|\/)/g).pop();

                        // execute PHP script that runs bash script
                        $.ajax({
                            url: "insertSQL.php",
                            type: "GET",
                            cache: false,
                            data: {fn: fn, ln: ln, email: email, phone: phone, sex: gender, ethnicity: race, dob: dob, skill: skill, photo: photo},
                            success: function(data) {
                                $("#success").html("Your data was successfully submitted, thank you.")
                                $("#success").css('display','block') // show the download div
                                console.log("data successfuly inserted into DB")
                            }
                        });
                        event.preventDefault();
                    } else {
                        console.log("bot")
                    }
                },
                filter: function() {
                    return $(this).is(":visible");
                }
            });
        });

我尝试了多种方法，包括将一个函数放在另一个函数的

success:

部分，将它放在

complete:

部分以及

async:false

部分，但无法让它们很好地配合使用（只有一个函数可以正常运行）。我做错了什么

编辑： 我已采纳您的建议，并将代码更新为以下内容：

// upload the image
        $(document).ready(function (e){
            $("#uploadForm").on('submit',(function(e){
                document.getElementById("submit").disabled = true; // disable submit button so user doesn't press it again
                e.preventDefault();
                $.ajax({
                    url: "upload.php?" + rand,
                    type: "POST",
                    data:  new FormData(this),
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(d) {
                        console.log("image properly uploaded");
                        submitSQL();
                    },
                    complete: function(data){
                    }
                });
            }));
        });

        function submitSQL() {
            console.log("submitting form");

            // submit the form data
            $(function() {
                $(".form-horizontal").find("input,textarea,select").jqBootstrapValidation({
                    preventSubmit: true,
                    submitError: function($form, event, errors) { // if error
                        console.log("submit error")
                    },
                    submitSuccess: function($form, event) { // if success
                        if($('#form input').val() == '') { // if honeypot div is empty when submit is pressed, then this is a human
                            console.log("form is filled out properly")

                            var genderSelect = document.getElementById("gender");
                            var raceSelect = document.getElementById("race");
                            var gender = genderSelect.options[genderSelect.selectedIndex].value;
                            var race = raceSelect.options[raceSelect.selectedIndex].value;
                            var email = $("input#email").val();
                            var phone = $("input#phone").val();
                            var dob = $("input#dob").val();
                            var skill = $("input#skill").val();
                            var fn = $("input#fn").val();
                            var ln = $("input#ln").val();
                            var photo = document.getElementById('photo').value.split(/(\\|\/)/g).pop();

                            // execute PHP script that runs bash script
                            $.ajax({
                                url: "insertSQL.php",
                                type: "GET",
                                cache: false,
                                data: {fn: fn, ln: ln, email: email, phone: phone, sex: gender, ethnicity: race, dob: dob, skill: skill, photo: photo},
                                success: function(data) {
                                    $("#success").html("Your data was successfully submitted, thank you.")
                                    $("#success").css('display','block') // show the download div
                                    console.log("data successfuly inserted into DB")
                                }
                            });
                            event.preventDefault();
                        } else {
                            console.log("bot")
                        }
                    },
                    filter: function() {
                        return $(this).is(":visible");
                    }
                });
            });
        }

看起来好像正在调用submitQSL函数，因为我在控制台中看到了“submitting form”消息，但之后没有发生任何其他事情。它可能与bootstrapvalidation脚本有关吗？

使用命名函数

function Ajax1() {
   /* your ajax stuff */
}

function Ajax2() {
   /* second ajax stuff */
}

---

然后，您可以从Ajax1的成功部分调用Ajax2。

您可以在

uploadImage

ajax的

success:

中调用

submitForm（）

方法

    $(document).ready(function (e){
    $("#uploadForm").on('submit',(function(e){
        document.getElementById("submit").disabled = true; // disable submit button so user doesn't press it again
        e.preventDefault();
        $.ajax({
            url: "upload.php?" + rand,
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(d) {
                console.log("image properly uploaded");
                submitForm();
            },
            complete: function(data){
            }
        });
    }));
});

function submitForm(){
 //Your code here

}

---

用以下方法解决了问题，但不确定我之前做错了什么：

 <script>

        var rand = Math.floor(Math.random() * 1000);



        // submit the form data
        $(function() {
            $(".form-horizontal").find("input,textarea,select").jqBootstrapValidation({
                preventSubmit: true,
                submitError: function($form, event, errors) { // if error
                    console.log("submit error")
                },
                submitSuccess: function($form, event) { // if success
                    if($('#form input').val() == '') { // if honeypot div is empty when submit is pressed, then this is a human
                        document.getElementById("submit").disabled = true; // disable submit button so user doesn't press it again
                        console.log("form is filled out properly, uploading file...")

                        //disable the default form submission
                        event.preventDefault();

                        // get all our vars
                        var genderSelect = document.getElementById("gender");
                        var raceSelect = document.getElementById("race");
                        var gender = genderSelect.options[genderSelect.selectedIndex].value;
                        var race = raceSelect.options[raceSelect.selectedIndex].value;
                        var email = $("input#email").val();
                        var phone = $("input#phone").val();
                        var dob = $("input#dob").val();
                        var skill = $("input#skill").val();
                        var fn = $("input#fn").val();
                        var ln = $("input#ln").val();
                        var photo = document.getElementById('photo').value.split(/(\\|\/)/g).pop();


                        //grab all form data
                        var formData = new FormData($("form#uploadForm")[0]);

                        // upload file
                        $.ajax({
                            url: 'upload.php?' + rand,
                            type: 'POST',
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: function (returndata) {
                                console.log(returndata);

                                // if file uploaded properly, submit data to DB
                                $.ajax({
                                    url: "insertSQL.php",
                                    type: "GET",
                                    cache: false,
                                    data: {fn: fn, ln: ln, email: email, phone: phone, sex: gender, ethnicity: race, dob: dob, skill: skill, photo: photo},
                                    success: function(data) {
                                        $("#success").html("Your data was successfully submitted, thank you.")
                                        $("#success").css('display','block') // show the download div
                                        console.log("data successfuly inserted into DB")
                                    }
                                });


                            }
                        });

                    } else {
                        console.log("bot")
                    }
                },
                filter: function() {
                    return $(this).is(":visible");
                }
            });
        });



    </script>

var rand=Math.floor（Math.random（）*1000）；
//提交表单数据
$（函数（）{
$（“.form horizontal”）.find（“输入，文本区域，选择”）.jqBootstrapValidation({
对,，
submitError:函数（$form，event，errors）{//if error
console.log（“提交错误”）
},
submitSuccess:function（$form，event）{//if success
如果（$（'#form input'）.val（）=''）{//如果按下submit时蜜罐div为空，则这是一个人
document.getElementById（“submit”）.disabled=true；//禁用submit按钮，以便用户不再按它
日志（“表格填写正确，上传文件…”）
//禁用默认表单提交
event.preventDefault（）；
//把我们所有的士兵都带走
var genderSelect=document.getElementById（“性别”）；
var raceSelect=document.getElementById（“race”）；
var gender=genderSelect.options[genderSelect.selectedIndex].value；
var race=raceSelect.options[raceSelect.selectedIndex].value；
var email=$（“输入电子邮件”）.val（）；
var phone=$（“输入电话”）.val（）；
var dob=$（“输入#dob”）.val（）；
var skill=$（“输入技能”）.val（）；
var fn=$（“输入#fn”）.val（）；
var ln=$（“input#ln”）.val（）；
var photo=document.getElementById（'photo'）.value.split（/（\\\\\\\/）/g.pop（）；
//获取所有表单数据
var formData=new formData（$（“form#uploadForm”）[0]）；
//上传文件
$.ajax({
url:'upload.php？'+兰德，
键入：“POST”，
数据：formData，
cache:false，
contentType:false，
processData:false，
成功：函数（返回数据）{
console.log（返回数据）；
//如果文件上传正确，将数据提交给DB
$.ajax({
url:“insertSQL.php”，
键入：“获取”，
cache:false，
数据：{fn:fn，ln:ln，email:email，phone:phone，性别：性别，种族：种族，出生日期：出生日期，技能：技能，照片：照片}，
成功：功能（数据）{
$（“#success”）.html（“您的数据已成功提交，谢谢。”）
$（“#success”）.css（'display'，'block'）//显示下载div
log（“数据成功插入数据库”）
}
});
}
});
}否则{
控制台日志（“bot”）
}
},
过滤器：函数（）{
return$（this）.is（“：可见”）；
}
});
});

你可以将第二个ajax调用包装成一个方法，比如说

nextAjax（）

，然后在第一个ajax调用

success:

你可以调用

nextAjax（）

无耻的自我插件：这类事情是我写taskrunnerjs.com的原因之一。像上面这样的嵌套回调可能会变得非常难以读取和维护。链接方法（IMO）要容易得多。