ajax.js 的函数
function $ajax({method = "get",url,data,success,error}){
//1、创建ajax对象
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断如果数据存在
if(data){
data = querystring(data);
}
if(method == "get" && data){
url += "?" + data;
}
xhr.open(method,url,true);
if(method == "get"){
xhr.send();
}else{
//必须在send方法之前,去设置请求的格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
//4、等待数据响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//判断本次下载的状态码都是多少
if(xhr.status == 200){
/*
如何去处理数据不确定
回调函数,
*/
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error:" + xhr.status);
}
}
}
}
}
//转成字符串函数
function querystring(obj){
var str ="";
for (var attr in obj) {
str += attr + "=" + obj[attr] +"&";
}
return str.substring(0,str.length - 1)
}
查询数据的php页面
<?php
header('content-type:text/html;charset="utf-8"');
/*
连接数据库 天龙八部
*/
/*
//1.连接数据库
第一个参数:连接数据库IP
第二个参数:用户名
第三个参数:密码*/
$link = mysql_connect("localhost","root","root");
//2.判断是否连接成功
if(!$link){
echo "连接失败";
exit;//终止
}
//3.设置字符集
mysql_set_charset("utf8");
//4.选择数据库
mysql_select_db("yyy");
//5.准备sql语句
$sql = "select * from students";
//6.发送sql语句
$res = mysql_query($sql);
// var_dump($res);
$arr = array();
//7.处理结果集
while($row = mysql_fetch_assoc($res)){
// var_dump($row);
array_push($arr,$row);
}
echo json_encode($arr);
//8.关闭数据库
mysql_close($link);
?>
查询数据的html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="ajax.js"></script>
<script>
window.onload = function(){
var btn = document.getElementById("btn1");
var t1 = document.getElementById("t1");
btn.onclick = function(){
$ajax({
method: "get",
url: "showStudents_json.php",
success: function(result){
var arr = JSON.parse(result);
var str = ``;
for(var i = 0 ; i<arr.length;i++){
str += `<tr>
<td>${arr[i].id}</td>
<td>${arr[i].name}</td>
<td>${arr[i].english}</td>
<td>${arr[i].math}</td>
<td>${arr[i].chinese}</td>
</tr>`
}
t1.innerHTML = str;
},
error: function(msg){
alert(msg);
}
})
}
}
</script>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h2>获取学员的成绩</h2>
</div>
<div class="panel-body">
<button id="btn1" class="btn btn-primary">获取所有学员信息</button>
<br>
<br>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>学员学号</td>
<td>学员姓名</td>
<td>英语成绩</td>
<td>数学成绩</td>
<td>语文成绩</td>
</tr>
</thead>
<tbody id ="t1"></tbody>
</table>
</div>
<div class="panel-footer">
<a href="insertStudents.html">插入学员成绩</a>
</div>
</div>
</div>
</body>
</html>
插入数据的php页面
<?php
header('content-type:text/html;charset="utf-8"');
$responseData = array("code" => 0, "message" => "");
// var_dump($_POST);
//把数据取出来
$name = $_POST["name"];
$english = $_POST["english"];
$math = $_POST["math"];
$chinese = $_POST["chinese"];
//1.连接数据库
$link = mysql_connect("localhost","root","root");
//2.判断是否连接成功
if(!$link){
$responseData["code"] = 1;
$responseData["message"] = "数据库连接失败";
//返回到前台页面
echo json_encode($responseData);
exit;//终止
}
//3.设置字符集
mysql_set_charset("utf8");
//4.选择数据库
mysql_select_db("yyy");
//5.准备sql语句
$sql = "insert into students(name,english,math,chinese) values('{$name}',{$english},{$math},{$chinese})";
//6.发送sql语句
$res = mysql_query($sql);
if(!$res){
$responseData["code"] = 2;
$responseData["message"] = "数据插入失败";
echo json_encode($responseData);
exit;
}else{
$responseData["message"] = "添加学员成绩成功";
echo json_encode($responseData);
}
//8.关闭数据库
mysql_close($link);
?>
插入数据的html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="ajax.js"></script>
<script>
/*
from表单提交数据后,需要跳转页面
ajax 异步进行数据传输
*/
window.onload = function(){
var submit = document.getElementById("submit");
var inputs = document.getElementsByTagName("input");
submit.onclick = function(){
$ajax({
method: "post",
url: "insertStudents.php",
data: {
name: inputs[0].value,
english:inputs[1].value,
math:inputs[2].value,
chinese:inputs[3].value,
},
success:function(result){
var arr = JSON.parse(result);
alert(arr.message);
},
error:function(msg){
alert(msg);
}
});
}
}
</script>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h2>登入学员成绩</h2>
</div>
<div class="panel-body">
<div class="form-group">
<label for="name">学员姓名</label>
<input type="text" class="form-control" name="name">
</div>
<div class="form-group">
<label for="english">英语成绩</label>
<input type="text" class="form-control" name="english">
</div>
<div class="form-group">
<label for="math">数学成绩</label>
<input type="text" class="form-control" name="math">
</div>
<div class="form-group">
<label for="chinese">语文成绩</label>
<input type="text" class="form-control"
name="chinese">
</div>
<div class="form-group">
<button id="submit" class="btn btn-primary form-control">提交学员成绩</button>
</div>
</div>
<div class="panel-footer">
<a href="showStudents.html">查看学员成绩</a>
</div>
</div>
</div>
</body>
</html>