1
我正在放置一個HTML表單，用戶填寫他們的信息並上傳自己的圖像。我已經編寫了兩個獨立的ajax函數來執行此操作：1）上傳圖像，2）提交表單（經過適當驗證後），並將其插入到sql數據庫中。在成功完成ajax之後執行ajax php
我已經得到了每個函數單獨工作，但我不能讓他們一起工作。我的意思是，如果圖像正確上傳，我只想將數據插入到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腳本的東西？
你可以用第二個AJAX調用到的方法，說'nextAjax（）'然後在第一ajax的調用'成功：'你可以調用'nextAjax（）' – ElliotM 2015-03-13 14:44:58
無恥的自我插入：這種事情是我編寫taskrunnerjs.com的原因之一。如上所述的嵌套回調可能會超級難於閱讀和維護。鏈式方法（IMO）更容易。 – brianvaughn 2015-03-13 14:49:48