HTML/javascript(原生方法)/PHP/MySQL进行AJAX异步JSON获取
以下为MySQL语句：
|
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语句：
|
1
2
3
4
5
6
7
8
9
|
<?php
header("Content-Type:application/json");
$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语句：
|
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语句：
|
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，可以更简单实现：
|
1
2
|
$("#sel").load("class_select.php");
$("#tbl").load("student_select.php");
|
实现AJAX异步生成数据库中班级信息，通过点击班级信息，异步获取对应班级的学生信息。
THE END
