AJAX JQuery POST不起作用
[英]AJAX JQuery POST Not Working
問題描述
我無法讀取PHP腳本中期望的POST值。 請求通過它只是沒有正確地將數據序列化到所有這一切的POST請求方面。 代碼數量適中，我寧願您跳過這一步，也不願對其投反對票，因為我急切需要幫助，而且我知道你們中的許多人不願意花時間回答這么長時間的問題。
HTML：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="/core/enrollphase1.php" id="enrollPhase1" method="post" name="enrollPhase1">
<select class="inputGeneral" id="SecurityQuestion1" style="font-size:20px;">
<option value="1">
What is your favorite book?
</option>
<option value="2">
What is your favorite movie?
</option>
<option value="3">
What is your favorite TV show?
</option>
<option value="4">
What is your pet's name?
</option>
<option value="5">
What is your favorite hobby?
</option>
</select><br>
<br>
<input class="inputGeneral" id="SecurityAnswer1" type="text"><br>
<br>
<select class="inputGeneral" id="SecurityQuestion2" style="font-size:20px;">
<option value="1">
What is your favorite book?
</option>
<option value="2">
What is your favorite movie?
</option>
<option value="3">
What is your favorite TV show?
</option>
<option value="4">
What is your pet's name?
</option>
<option value="5">
What is your favorite hobby?
</option>
</select><br>
<br>
<input class="inputGeneral" id="SecurityAnswer2" type="text"><br>
<br>
<input class="inputGeneral" type="submit" value="Continue">
</form>
</body>
</html>
jQuery和AJAX：
$(document).arrive("#enrollPhase1", function() {
// Auto Correct Questions
$("#SecurityQuestion1").on("change", function() {
if(this.value === $("#SecurityQuestion2").val()) {
// Notify that same question will not fly with us
} else {
// If something changes and they are no longer the same, remove all errors
}
})
$("#SecurityQuestion2").on("change", function() {
if(this.value === $("#SecurityQuestion1").val()) {
// Notify that same question will not fly with us
} else {
// If something changes and they are no longer the same, remove all errors
}
})
// Get EnrollPhase1 Form...
var EnrollPhase1Form = $('#enrollPhase1');
$(EnrollPhase1Form).submit(function(event) {
// Catch Browser Submitting Form
event.preventDefault();
// Temp Hold Security Question IDs to check for same question
var SQ1 = $("#SecurityQuestion1").find(":selected").val();
var SQ2 = $("#SecurityQuestion2").find(":selected").val();
if(SQ1 === SQ2) {
// Same question issue
return;
}
// Temp Hold Security Question Answers to check for same answer
var SA1 = $("#SecurityAnswer1").val();
var SA2 = $("#SecurityAnswer2").val();
if(SA1 === SA2) {
// Same answer issue
return;
}
// Hide UsernameForm...
$("#enrollPhase1Container").hide();
// Error Message Response Removal
$(".success, .error, .warning, .info").remove();
// Start animationSpin
$("#animationSpin").removeClass("hidden");
// Serialize the form data
alert(JSON.stringify(EnrollPhase1Form));
var formData = $(EnrollPhase1Form).serialize();
// Submit the form using AJAX.
$.ajax({
type: $(EnrollPhase1Form).attr('method'),
url: $(EnrollPhase1Form).attr('action'),
data: formData,
statusCode: {
500: function() {
// Done animationSpin
$("#animationSpin").addClass("hidden");
// Error Message Callback
$(".status").append("<div class=\"error\"><span class=\"closebtn\" onclick=\"this.parentElement." +
"style.display='none';\">×</span>" + "<h4>Server Returned 500 Error Code</h4>" + "</div>");
// Show Form Again
$("#enrollPhase1Container").show();
}
}
})
.done(function(response) {
window.setTimeout(function(){
$("#animationSpin").addClass("hidden");
if(response == "REFRESH") {
location.reload();
} else if(response.startsWith("Error")) {
// Error Message Adding
$(".status").append("<div class=\"error\"><span class=\"closebtn\" onclick=\"this.parentElement.style.display='none';\">" +
"×</span>" + response.replace("Error", "") + "</div>");
// Increase height
$("#loginContainer").height("70%");
// Show Form Again
$("#enrollPhase1Container").show();
} else {
// Remove UsernameForm...
$("#enrollPhase1Container").remove();
// Decrease height
$("#loginContainer").height("50%");
// Set the message text.
$("#login").append(response);
}
}, 1000)
})
});
});
enrollphase1.php：
// Do we have
var_dump($_POST);
1 個解決方案
解決方案1
1 已采納 2018-04-05 01:09:43
您忘記了所有表單元素上的name屬性。 .serialize仍然需要.serialize （因此它可以為post變量指定值的名稱）。 因此，調整您的表單元素：
<form action="/core/enrollphase1.php" id="enrollPhase1" method="post" name="enrollPhase1">
<select .. id="SecurityQuestion1" name="SecurityQuestion1"></select>
<input .. id="SecurityAnswer1" name="SecurityAnswer1" type="text">
<select .. id="SecurityQuestion2" name="SecurityQuestion2"></select>
<input .. id="SecurityAnswer2" name="SecurityAnswer2" type="text">
<input .. type="submit" value="Continue">
</form>
現在，當您從$_POST數組中獲取它們時，應該將它們顯示為：
$_POST['SecurityQuestion1']
$_POST['SecurityAnswer1']
$_POST['SecurityQuestion2']
$_POST['SecurityAnswer2']
附帶說明一下，您在jquery中使用選擇器有點奇怪。 我建議您更改為以下內容（僅針對這些行）：
$("#enrollPhase1").submit(function(event) {
....
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
....
jQuery Ajax發布不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.