eclipse（写一个表格）

宵夜qp

已于 2024-03-29 10:39:22 修改

阅读量777

点赞数 12

文章标签： eclipse java ide

于 2024-03-29 09:45:44 首次发布

本文链接：https://blog.csdn.net/a6468676499/article/details/137132566

版权

利用eclipse写一个如图所示的表格

在这里插入图片描述

1.首先打开eclipse，在webcontent中创建一个HTML(自己命名，在这命名为newData.html)

在这里插入图片描述

2.在创建的newData.html中写入如下代码

在这里插入图片描述

<!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（如图所示）

在这里插入图片描述

4.命名为newDataServlet（自己命名）,在这里写入如下代码，注意：只更改了28行到43行的内容，其他不变（5.6.7是写法，往下看看！！）

在这里插入图片描述

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"}
	
	]

}

在其中写入以上代码（自己可更改内容）后，点击检验查看是否正确

在这里插入图片描述

6.回到eclipse的newDataServlet界面，在第31行写入`String data ="";`,把上边的代码复制到双引号内就可以有下图的效果啦

在这里插入图片描述

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);
	}