0 html javascript ajax jquery json
我有一个宁静的Web服务http:// localhost:8080/CRUDWebAppMavenized/persons,输出一个json数组.我在jquery中使用AJAX,我想在我的HTML表中显示json数组.我不能让它显示在html表中.我将发布html,javascript代码和json数组代码.
index3.html HTML文件.用于在浏览器中显示学生信息.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="engine.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<table id="blogTable">
<tr>
<th>studentId</th>
<th>firstname</th>
<th>lastname</th>
<th>yearLevel</th>
</tr>
</table>
</body>
</html>
engine.js(使用Jquery) AJAX调用然后将代码放在html文件的表标记中.
$(document).ready(function () {
$.ajax({
url: 'http://localhost:8080/CRUDWebAppMavenized/persons',
type: 'GET',
dataType: 'json',
success: function (result) {
var insert = '';
$.each(result, function (index, item) {
insert += '<tr><td>' + item.studentId + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.yearLevel + '</td></tr>';
});
$('#blogTable tr:last').after(insert);
}
});
});
JSON数组 来自Web服务URL的JSON数组.这是由Web应用程序生成的.
[
{
"studentId": 5,
"firstname": "bro",
"lastname": "oy",
"yearLevel": 0
},
{
"studentId": 6,
"firstname": "lol",
"lastname": "keke",
"yearLevel": 0
},
{
"studentId": 8,
"firstname": "omg",
"lastname": "yo",
"yearLevel":0
}
]
首先是jquery你jquery dependent js喜欢的
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="engine.js"></script>