利用eclipse写一个如图所示的表格
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/bd19c0b1828a4504930a588b1c04567a.png)
1.首先打开eclipse,在webcontent中创建一个HTML(自己命名,在这命名为newData.html)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f0214fd5efb34883a0dcceba73e85b39.png)
2.在创建的newData.html中写入如下代码
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/08a5223e95b94b27861dab80b58f8951.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body onload="get()">
<div id="hhh"></div>
</body>
<script>
function get(){
$.ajax({
type:"get",
url:"/BigData01/newDataServlet",
success:function(data){
console.log(data);
showData(data.data);
}
})
}
function showData(data){
var html = '<table border="1">';
for(var i = 0; i < data.length;i++){
html += '<tr>';
html += '<td>' + data[i].username + '</td>';
html += '<td>' + data[i].password + '</td>';
html += '<td>' + data[i].sex + '</td>';
html += '<td>' + data[i].age + '</td>';
html += '<td>';
html += '<input type="button" value="编辑" />';
html += '<input type="button" value="删除" />';
html += '</td>';
html += '</tr>';
}
html +='</table>';
$("#hhh").empty().append(html);
}
</script>
</html>
3.在 JAVA Resources的src的com.bigdata(自己创建的)中创建一个servlet(如图所示)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/bd284ae262564452a3d255f892d18f68.png)
4.命名为newDataServlet(自己命名),在这里写入如下代码,注意:只更改了28行到43行的内容,其他不变(5.6.7是写法,往下看看!!)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ca7f6316f5494854bd41a3caac73a802.png)
5.利用JOSN编辑器更快写入代码(31-39行)
JOSN在线编辑器的链接!!!(点我!!!!)
{
"data":[
{"username":"admin","password":"123456","sex":"男","age":"23"},
{"username":"admin","password":"123456","sex":"男","age":"20"},
{"username":"admin","password":"123456","sex":"女","age":"14"},
{"username":"admin","password":"123456","sex":"男","age":"28"}
]
}
在其中写入以上代码(自己可更改内容)后,点击检验查看是否正确
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/3e30df677d8541aeaf658f67b62561be.png)
6.回到eclipse的newDataServlet界面,在第31行写入String data ="";
,把上边的代码复制到双引号内就可以有下图的效果啦
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/25e7d88acf5c42689fc6afaa6b2d11d0.png)
7.第四条的完整代码(29-42行),其余不变
response.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
String data = "{\r\n" +
" \"data\":[\r\n" +
" {\"username\":\"admin\",\"password\":\"123456\",\"sex\":\"男\",\"age\":\"23\"},\r\n" +
" {\"username\":\"admin\",\"password\":\"123456\",\"sex\":\"男\",\"age\":\"20\"},\r\n" +
" {\"username\":\"admin\",\"password\":\"123456\",\"sex\":\"女\",\"age\":\"14\"},\r\n" +
" {\"username\":\"admin\",\"password\":\"123456\",\"sex\":\"男\",\"age\":\"28\"}\r\n" +
" ]\r\n" +
"\r\n" +
"}";
response.getWriter().append(data);
}
8.回到newData.html中,右击运行
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c338771b2ce5458bae84f7b5ad4c2e68.png)
9.运行出的界面!!!!
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/10f2d2bf445442008db1eefb24440d84.png)