使用html格式，通过php调用数据库并显示数据

接上一篇 https://blog.csdn.net/mainmaster/article/details/114686335?spm=1001.2014.3001.5501

<!DOCTYPE html>
<html ng-app = 'test'>

<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type=text/html;charset=utf-8"/>

<script type="text/javascript" src="http://code.changer.hk/jquery/1.11.2/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.table{
width: 1000px;
text-align: center;
}
</style>
<title>学生信息管理</title>
</head>

<body ng-controller = 'main'>
<div class="">
       <center>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>学号</td>
<td>姓</td>
<td>名</td>
<td>邮件地址</td>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
       </center>
</div>
</body>
<script type="text/javascript">
//"{"id":"1","firstname":"John","lastname":"Doe","email":"[email protected]"}{"id":"2","firstname":"Mary","lastname":"Moe","email":"[email protected]"}{"id":"3","firstname":"Julie","lastname":"Dooley","email":"[email protected]"}{"id":"4","firstname":"John","lastname":"Doe","email":"[email protected]"}{"id":"5","firstname":"Mary","lastname":"Moe","email":"[email protected]"}{"id":"6","firstname":"Julie","lastname":"Dooley","email":"[email protected]"}{"id":"7","firstname":"John","lastname":"Doe","email":"[email protected]"}{"id":"8","firstname":"Mary","lastname":"Moe","email":"[email protected]"}{"id":"9","firstname":"Julie","lastname":"Dooley","email":"[email protected]"}{"id":"10","firstname":"John","lastname":"Doe","email":"[email protected]"}{"id":"11","firstname":"Mary","lastname":"Moe","email":"[email protected]"}{"id":"12","firstname":"Julie","lastname":"Dooley","email":"[email protected]"}"
$.ajax({
type: 'POST',
url: 'testdb.php',
data: {"id":"1","firstname":"John","lastname":"Doe","email":"[email protected]"},
success: function (data) {
       //这里采用了一个非常笨的方法，有哪位大神有好的方法，回复一下呗，谢谢了
       //使用正则表达式将其中的 '｝' 更换成 '｝ ' ,增加了一个空格，
       var reg = new RegExp('}',"g");
       var data = data.replace(reg,'} ');
       //根据空格分割成多个对象，
var a = data.split(' ');
var trStr = '';//动态拼接table
for (var i = 0; i < a.length-1; i++) {
           //a[i]=a[i].replace('{','');
trStr += '<tr class="example">';
trStr += '<td width="15%">' + JSON.parse(a[i]).id + '</td>';
trStr += '<td width="15%">' + JSON.parse(a[i]).firstname + '</td>';
trStr += '<td width="15%">' + JSON.parse(a[i]).lastname + '</td>';
trStr += '<td>' + JSON.parse(a[i]).email + '</td>';
//trStr += '<td>' + JSON.parse(a[i]).reg_date + '</td>';
trStr += '</tr>';
}
$("#tbody").html(trStr);
}
});
</script>
</html>

执行界面如下图

循环读取数据的地方，用了一个非常笨的方法，刚开始，还没有搞清楚json的对象包含多个数据记录的如何分割，有哪位大神提供下思路，谢谢。

使用html格式，通过php调用数据库并显示数据

猜你喜欢