为什么XMLHttpRequest readystate不等于4？ [英] Why is XMLHttpRequest readystate not equal to 4?
问题描述
我第一次学习AJAX，我正在尝试创建一个简单的应用程序，根据之前的评估结果计算一个人在期末考试中所需的成绩。
I'm learning AJAX for the first time and I'm trying to create a simple application that calculates the grade a person needs to get on their final exam based on their previous assessment results.
用户将他们的成绩输入到表单然后使用ajax我在response.php中计算响应，然后应该在div中的回调函数中输出ajax as它的身份。
The user inputs their grades into the form and then using ajax I calculate the response in response.php which should then be output in the callback function in the div with ajax as its id.
由于某种原因，xhr.readystate属性永远不会达到4，因此永远不会生成响应。谁能看到我做错了什么？
For some reason the xhr.readystate property is never reaching 4 so the response is never generated. Can anybody see what I'm doing wrong?
请记住我只是在学习......
Please bear in mind I'm only learning...
index.php
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Grade Calculator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
function sendAjax() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
document.getElementById('ajax').innerHTML = xhr.responseText;
} else {
document.getElementById('ajax').innerHTML = document.write('There was a problem');
}
};
xhr.open("GET","response.php");
xhr.send();
document.getElementById('gradeForm').style.display = "none";
document.write(xhr.readyState);
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1><br>
<form action="index.php" method="get" id="gradeForm">
<div class="form-group">
<label for="currentGrade">What is your current Grade</label>
<input type="text" name="currentGrade"><br>
</div>
<div class="form-group">
<label for="targetGrade">What is your target Grade</label>
<input type="text" name="targetGrade"><br>
</div>
<div class="form-group">
<label for="finalWorth">What is your final worth?</label>
<input type="text" name="finalWorth"><br>
</div>
<button type="submit" class="btn btn-default" onclick="sendAjax()">Submit</button>
</form>
<div id="ajax">
</div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
这是response.php
Here is response.php
<?php
$currentGrade = $_GET['currentGrade'];
$targetGrade = $_GET['targetGrade'];
$finalWorth = $_GET['finalWorth'];
$neededMark = $currentGrade - $targetGrade;
$neededMark = $neededMark / $finalWorth;
$neededMark = $neededMark * 100;
$neededMark = round($neededMark);
if(isset($currentGrade, $targetGrade,$finalWorth)) {
echo $neededMark;
}
?>
推荐答案
正确的操作顺序是：
- 构建
- 打开
- 设置处理程序
- 发送
- construct
- open
- set handler
- send
您正在按照1324的顺序执行这些操作，这是不正确的，因此可能不会按预期运行。
You are doing them in the order 1324, which is incorrect and therefore likely to not behave as expected.
按顺序排列，查看是否有效：）
Put things in the right order, see if that works :)
编辑：此外，删除所有 document.write 来电。它们不能用于任何异步操作，并且几乎肯定会破坏。
Additionally, remove all document.write calls. They will not work with any asynchronous operation and will almost certainly break things.
编辑编辑：此外，< button type =submitclass =btn btn-defaultonclick =sendAjax（）> - 这应该是 type =button，否则你的表格将被提交，看起来它什么也没做。
EDIT Also, <button type="submit" class="btn btn-default" onclick="sendAjax()"> - this should be type="button", otherwise your form will be submitted and it will look like it did nothing.
这篇关于为什么XMLHttpRequest readystate不等于4？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
