我正在整理一个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函数，因为我在控制台中看到了“提交表单”消息，但之后没有其他事情发生。它可能是bootstrapvalidation脚本的东西吗？
答案 0 :(得分：0)
使用命名函数。
function Ajax1() {
/* your ajax stuff */
}
function Ajax2() {
/* second ajax stuff */
}
然后你可以从Ajax1的成功部分调用Ajax2。
答案 1 :(得分：0)
您可以在submitForm() ajax的success:内调用uploadImage方法。
$(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
}
答案 2 :(得分：0)
解决了以下问题，不确定我之前做错了什么：
<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>