Question

我第一次学习AJAX，我正在尝试创建一个简单的应用程序，根据之前的评估结果计算一个人在期末考试中所需的成绩。

用户将他们的成绩输入到表单中然后使用ajax我在response.php中计算响应，然后应该在div中的回调函数中输出ajax作为其id。

由于某种原因，xhr.readystate属性永远不会达到4，因此永远不会生成响应。谁能看到我做错了什么？

请记住我只是在学习......

的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

<?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;
        }

?>

Answer 1

正确的操作顺序是：

构建
开
设置处理程序
发送

你是按照1324的顺序进行的，这是不正确的，因此可能不会按预期运行。

按正确顺序排列，看看是否有效：）

编辑：此外，请删除所有 document.write来电。它们不能用于任何异步操作，并且几乎肯定会破坏。

编辑编辑：此外，<button type="submit" class="btn btn-default" onclick="sendAjax()"> - 这应该是type="button"，否则您的表单将被提交，看起来它什么也没做。

Answer 2

看起来你没有在你的ajax请求中发送任何参数，所以response.php没有获取任何数据......

如果是xhr.open（“GET”，“response.php？param1 = value1＆amp; param2 = value2”）;等你应该得到一些东西

Answer 3

只需要一个小改变以表格划分而不是提交。因为与仅单击按钮相比，提交表单时的行为有所不同

为什么XMLHttpRequest readystate不等于4？

3 个答案: