使用 XMLHttpRequest 显示 MySQL 内数据库中的数据

问题描述

我下面有一个 index.htm 页面，它有一个 id="studentGpa" 的文本框，用户输入一个数字，程序将打开 PHP 页面，搜索数据库，然后从学生表中提取数据。我需要显示的数据是用户输入的最低 GPA。例如，如果用户输入 3.5，则它会显示 GPA 为 3.5 或以下的所有学生信息（学生 ID、姓名、电子邮件、学生 GPA）。

代码正在编译，但是当我输入数字 3 时，它会给我 GPA 为 3 的学生的所有信息，或者如果我输入 3.5，它将显示 GPA 为 3.5 的所有学生的信息.可能是查询有问题，也可能是我的 index.htm 页面上的代码有问题。我是否需要在 javascript 中或嵌入在 html 中的 if 语句，以便我可以显示与用户输入的数字相对应的学生信息。以下是程序外观示例的图像。 enter image description here enter image description hereindex.htm

 <!DOCTYPE html>
 <html lang="en">

  <head>
    <title>Matt Ferebee's Kung Fu School</title>
    <Meta charset="utf-8">
     <link href="main.css" rel="stylesheet" type="text/css">

 <script>
  function queryFunction(){
  var ajaxRequest;
   try{
    ajaxRequest = new XMLHttpRequest();
   }catch (e){
    try{
    ajaxRequest = new ActiveXObject("Msxm12.XMLHTTP");
    }catch (e){
        try{
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e) {
        alert("Your browser is broke!");
        return false;
      }
   }
}


ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
    var ajaxdisplay = document.getElementById('ajaxDiv');
      ajaxdisplay.innerHTML = ajaxRequest.responseText;
    }
}

     var studentGpa = document.getElementById('studentGpa').value; 
 
     var queryString = "?studentGpa=" + studentGpa;
    
     ajaxRequest.open("GET","matthewferebee_search.PHP" + queryString,true);
     ajaxRequest.send(null);

   }
     </script>
     </head>
         <body>

            <header>
            <h1>Matthew Ferebee's Kung Fu School - Search Students</h1>
            </header>
         <main>
         <section>

        
            <h4>Search for Students with the minimum GPA</h4>
        <form name="myForm">
            Minimum GPA:
        <input type="text" id="studentGpa"><br><br>
        <label>&nbsp;</label>
        <input type="button" onclick="queryFunction();" value="Search"style="margin-left: 98px;">
        </form>
        <div id="ajaxDiv"><h4>Students with GPAs with higher than minimum GPA will be displayed here. 
      </h4></div><br>
  
        <a href="matthew_ferebee_ajaxsearch_single.htm">Search & Split</a>
        </section>
         </main>
      <footer>
                    <p class="right">
                    &copy; <?PHP echo date("Y");?> Matthew Ferebee Kung Fu School</p>
                    </footer>

    </body>
      </body>
     </html>

PHP 页面ajaxRequest.open

 <?PHP 
 require_once('matthew_ferebee_database.PHP');
 $studentGpa = filter_input(INPUT_GET,'studentGpa');
 //echo $studentGpa."<br>";

 $query = "SELECT * FROM student 
            WHERE studentGpa LIKE :studentGpa
            ORDER BY studentID";
            
$statement = $db->prepare($query);
$statement->bindValue(':studentGpa',"%".$studentGpa."%",PDO::ParaM_STR);
$statement->execute();
$students = $statement->fetchAll();
?>

<table cellpadding="0" style="width: 600px">
 <tr>
  <td style="width: 162px">Student ID</td>
  <td style="width: 285px">Name</td>
  <td>Email</td>
  <td>GPA</td>
  </tr>
  <?PHP 
  foreach ($students as $s)
  {
 ?>
  <tr>
  <td style="width: 162px"><?PHP echo $s['studentID'];?></td>
  <td style="width: 285px"><?PHP echo $s['name'];?></td>
  <td><?PHP echo $s['email'];?></td>
  <td><?PHP echo $s['studentGpa'];?></td>
  </tr>
 <?PHP 
 }
 ?>
</table>

表架构

DROP DATABASE IF EXISTS matthew_ferebee_assignment_db;
CREATE DATABASE matthew_ferebee_assignment_db;
USE matthew_ferebee_assignment_db; 

/*  
  CREATE TABLE  
 */


 CREATE TABLE STUDENT (
  studentID     INT(11)        NOT NULL     AUTO_INCREMENT,name          VARCHAR(255)   NOT NULL,email         VARCHAR(255)   NOT NULL,studentGpa           DECIMAL(4,2)   NOT NULL,PRIMARY KEY (studentID)
  
   );



 INSERT INTO STUDENT (studentID,name,email,studentGpa)
  VALUES
  /*
 StudentID    Name              Email                     GPA              */
 (1,'Po Black','poblack@gmail.com',3.51),(2,'Shifu Hoffman','shihoffman@gmail.com',2.52),(3,'Tigress Jolie','tigressjolie@gmail.com',3.63),(4,'Jennifer Yuh','jenniferyuh@gmail.com',1.44),(5,'Ox Storming','ocstorming@gmail.com',3.95),(6,'Monkey Chan','monkeychan@gmail.com',4.00),(7,'Viper Liu','viperliu@gmail.com',2.37),(8,'Mantis Rogen','mantisrogen@gmail.com',3.29),(9,'Crane Cross','cranecross@gmail.com',3.72),(10,'Oogway Kim','oogway@gmail.com',1.53),(11,'Ping Hong','pinghong@gmail.com',2.52)
  ;

 /*username and password created along with granting privileges*/
 GRANT SELECT,INSERT,DELETE,UPDATE
 ON matthew_ferebee_assignment_db.*
 TO matthewweb@localhost
 IDENTIFIED BY 'matthewchocolate';

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript mysql xmlhttprequest xmlhttprequest