以下为MySQL语句：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/8526.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | SET NAMES UTF8; DROP DATABASE IF EXISTS qinghua; CREATE DATABASE qinghua CHARSET=UTF8; USE qinghua; CREATE TABLE qh_class( cid INT PRIMARY KEY, cname VARCHAR(10), count BIGINT ); INSERT INTO qh_class VALUES ("10","1501班","35"), ("20","1502班","50"), ("30","1503班","60"); CREATE TABLE qh_student( sid INT PRIMARY KEY AUTO_INCREMENT, sname VARCHAR(10), score INT, classId INT ); INSERT INTO qh_student VALUES (NULL,"李雷","80","10"), (NULL,"李鬼","76","10"), (NULL,"李想","60","10"), (NULL,"王雷","97","20"), (NULL,"王猛","79","20"), (NULL,"王鑫","86","20"), (NULL,"周王","81","30"), (NULL,"周洲","87","30"), (NULL,"周天","90","30"); |
以下为PHP语句：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/8526.html
1 2 3 4 5 6 7 8 9 | <?php $conn=mysqli_connect("127.0.0.1","root","","qinghua",3306); $sql="SET NAMES UTF8"; mysqli_query($conn,$sql); $sql="SELECT * FROM qh_class"; $result=mysqli_query($conn,$sql); $list=mysqli_fetch_all($result,MYSQLI_ASSOC); echo json_encode($list); |
以下为PHP语句：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/8526.html
1 2 3 4 5 6 7 8 9 10 | <?php header("Content-Type:application/json"); @$sid=$_REQUEST["classId"] or die('["必须选择一项"]'); $conn=mysqli_connect("127.0.0.1","root","","qinghua",3306); $sql="SET NAMES UTF8"; mysqli_query($conn,$sql); $sql="SELECT * FROM qh_student WHERE classId='$sid'"; $result=mysqli_query($conn,$sql); $list=mysqli_fetch_All($result,MYSQLI_ASSOC); echo json_encode($list); |
以下为HTML/JavaScript语句：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/8526.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>qinghua</title> </head> <body> <select id="sel"> <option value="0">--请选择班级--</option> </select> <table id="tbl"></table> <script> window.onload=function(){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState===4){ if(xhr.status===200){ var cls=JSON.parse(xhr.responseText); var html=""; for(var i=0;i<cls.length;i++){ var c=cls[i]; html+=`<option value="${c.cid}">${c.cname}</option>`; } sel.innerHTML+=html; } } }; xhr.open("GET","class_select.php",true); xhr.send(null); }; sel.onchange=function(){ var cid=this.value; if(cid==0){tbl.innerHTML=""}else{ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState===4){ if(xhr.status===200){ var stu=JSON.parse(xhr.responseText); var html=`<tr> <td>学生ID</td> <td>学生姓名</td> <td>分数</td> <td>操作</td> </tr>`; for(var i=0;i<stu.length;i++){ var s=stu[i]; html+=`<tr> <td>${s.sid}</td> <td>${s.sname}</td> <td>${s.score}</td> <td>删除</td> </tr>`; } tbl.innerHTML=html; } } }; xhr.open("GET","student_select.php?classId="+cid,true); xhr.send(null); } }; </script> </body> </html> |
以上代码均为原生方法的书写，通过JQuery的.load()获取HTML，可以更简单实现：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/8526.html
1 2 | $("#sel").load("class_select.php"); $("#tbl").load("student_select.php"); |
实现AJAX异步生成数据库中班级信息，通过点击班级信息，异步获取对应班级的学生信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/8526.html