案例效果为:当点击获取学院信息按钮时,无刷新页面,数据库中的数据会渲染到页面上。
实例解释(数据库):
此时数据库中有五条数据
页面解释(html):
简单的表单样式,有一个获取所有学员信息的按钮:
当点击了获取所有学员信息时候,页面上会变成:
话不多说上代码:
html部分为:
<div class="container">
<div class="panel panel-success">
<div id="btn1" class="panel-heading">
<h2>获取学员信息</h2>
</div>
<div class="panel-body">
<button class="btn btn-success">获取所有学员的信息</button><br/>
<table class="table table-bordered">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<tbody id="t1">
</tbody>
</table>
</div>
<div class="panel-footer">
<a href="./添加学员信息.html">新增学员信息</a>
</div>
</div>
</div>
js部分为:
window.onload=function(){
// 获取点击的按钮
var oBtn=document.getElementById("btn1");
var oT1=document.getElementById("t1");
oBtn.onclick=function(){
// console.log(1)
//调用jq的ajax方法
$.ajax({
//方法
method:"get",
url:"./php/index-json.php",
// 成功之后干什么事情:
success:function(result){
// 把传过来的json字符串转换为对象
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].age}</td>
<td>${arr[i].sex}</td>
</tr>`
}
// 添加到页面中
oT1.innerHTML=str;
},
error:function(msg){
alert(msg)
}
})
}
}
php代码为:
<?php
header('Content-type: text/html; charset=UTF8');
// 链接数据库(数据库的名字,账号,密码)
$link=mysqli_connect("localhost","root","");
// 判断数据库是否链接成功
if(!$link){
echo "连接失败";
exit;
}
// 全部转换为utf-8形式
mysqli_set_charset($link,"utf8");
// 连接数据库(自己建的数据库的名字)
mysqli_select_db($link,"test");
// 准备sql语句(查询当前表中的数据)
$sql="SELECT * FROM student";
// 发送sql语句
$res=mysqli_query($link,$sql);
// 创建一个数组
$arr=array();
// 循环拿到的数据
while($row=mysqli_fetch_assoc($res)){
// 把每个数据都存储到这个数中
array_push($arr,$row);
}
// 然后把数组转换为json格式的
echo json_encode($arr);
// 关闭数据库
mysqli_close($link);
?>