我無法使用jQuery的$ .post()方法從PHP文件檢索JSON數據。
我可以看到在控制檯中記錄了XHR POST請求,但未顯示響應消息。
有人可以請說明爲什麼會發生這種情況嗎?
形式
<form action="<?php echo htmlentities($_SERVER['SCRIPT_NAME']); ?>" method="post" id="gradeForm">
<div class="form-group" id="currentGradeGroup">
<label for="currentGrade">What is your current total grade?</label>
<input type="text" class="form-control" name="currentGrade">
<span class="help-block" id="currentGrade"></span>
</div>
<div class="form-group" id="targetGradeGroup">
<label for="targetGrade">What is your target grade?</label>
<input type="text" class="form-control" name="targetGrade">
<span class="help-block" id="targetGrade"></span>
</div>
<div class="form-group" id="finalWorthGroup">
<label for="finalWorth">What is your final exam worth?</label>
<input type="text" class="form-control" name="finalWorth">
<span class="help-block" id="finalWorth"></span>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="ajax"></div>
**Server side code**
<?php
$response = validate_form();
if (!empty($response)) {
echo '<pre>';
var_dump($response);
echo '</pre>';
exit(json_encode($response));
} else {
$response = success();
echo '<pre>';
var_dump($response);
echo '</pre>';
exit(json_encode($response));
}
// validate form input
function validate_form() {
$response = array();
// currentGrade must be filled out and be a number.
if (! (filter_has_var(INPUT_POST, 'currentGrade') && (filter_input(INPUT_POST, 'currentGrade', FILTER_VALIDATE_INT)))) {
$currentGrade = array();
$currentGrade['msg'] = "You need to enter a number for current grade";
$response[] = $currentGrade;
}
// currentGrade must be 0 or greater
if ($_POST['currentGrade'] < 0) {
$currentGrade = array();
$currentGrade['msg'] = "Current grade must be greater than or equal to zero";
$response[] = $currentGrade;
}
// targetGrade must be filled out and be a number.
if (! (filter_has_var(INPUT_POST, 'targetGrade') && (filter_input(INPUT_POST, 'targetGrade', FILTER_VALIDATE_INT)))) {
$targetGrade = array();
$targetGrade['msg'] = "You need to enter a number for target grade";
$response[] = $targetGrade;
}
// finalWorth must be filled out and be a number.
if (! (filter_has_var(INPUT_POST, 'finalWorth') && (filter_input(INPUT_POST, 'finalWorth', FILTER_VALIDATE_INT)))) {
$finalWorth = array();
$finalWorth['msg'] = "Your final exam worth needs to be a number.";
$response[] = $finalWorth;
}
$response['success'] = false;
return $response;
}
function success() {
$response = array();
$currentGrade = $_POST['currentGrade'];
$targetGrade = $_POST['targetGrade'];
$finalWorth = $_POST['finalWorth'];
$possibleGradeSoFar = (100 - $finalWorth)/100;
$finalWorth = $finalWorth/100;
$b = $currentGrade * $possibleGradeSoFar;
$c = $targetGrade - $b;
$neededMark = $c/$finalWorth;
$neededMark = round($neededMark);
$response['msg'] = '<p id="response">You need to get ' . $neededMark . ' to get a final mark of ' . $targetGrade . '.</p><br>';
if ($neededMark >= 50 && $neededMark <= 100) {
$response['header'] = '<h1>Better start studying...</h1><img class="img-responsive" src="img/Mike.gif" alt="Mike">';
} elseif ($neededMark > 100) {
$response['header'] = '<h1>Just give up now.</h1><img class="img-responsive" src="img/Gustavo-fring.gif" alt="Gustavo Fring">';
} elseif ($neededMark < 50) {
$response['header'] = '<h1>Time to party!</h1><img class="img-responsive" src="img/Yeah-science.gif" alt="Yeah Science!">';
}
$response['success'] = true;
return $response;
}
輸出JSON從json_encode()在一個單獨的PHP文件
{
"0": {
"msg": "You need to enter a number for current grade"
},
"1": {
"msg": "You need to enter a number for target grade"
},
"2": {
"msg": "Your final exam worth needs to be a number."
},
"success": false
}
的jQuery
jQuery(document).ready(function($) {
$('#gradeForm').submit(function(e) {
// stop form from submitting normally.
e.preventDefault();
// get some values from the form.
var $form = $(this);
var url = $form.attr('action');
var postData = $form.serialize();
// use the jQuery post method to send the data.
var posting = $.post(url, postData, 'json');
// If the request is successful append the response to the #ajax div.
posting.done(function(response) {
// output the appropriate message in the ajax div
$('#ajax').html(response[0].msg);
}) // end done();
// otherwise log the HTTP request status to the console.
.fail(function(jqXHR) {
console.log(jqXHR.status);
console.log(jqXHR.statusText);
}); // end fail();
}); // end submit();
}); // end ready();
是否成功/失敗處理程序獲取調用 –
請發表你的服務器端處理代碼..因爲在我看來,響應的格式將be response.0.msg –
@KyleEmmanuel我已經添加了它。 – chap