Continued from the previous article 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"/>
<!-- jQuery -->
<script type="text/javascript" src="http://code.changer.hk/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<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;</head> <title>Student Information Management</title> </style> }
<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) { //A very stupid method is used here. Is there any great god who has a good method? Reply, thank you.//Use regular expressions Replace the'｝' with'｝' and add a space, var reg = new RegExp('}',"g"); var data = data.replace(reg,'}'); //Split into Multiple objects, var a = data.split(''); var trStr ='';//Dynamic splicing 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>
The execution interface is as shown below
A very dumb method is used to read data in a loop. At the beginning, I haven't figured out how to divide the json object containing multiple data records. Can anyone provide me with an idea, thank you.