Ajax下手动打包json格式,自动生成Table

最新推荐文章于 2021-08-05 20:50:21 发布

原创最新推荐文章于 2021-08-05 20:50:21 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ajax #json

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种不依赖第三方库的手动打包JSON数据的方法，并通过Ajax实现了前端页面的异步数据加载及显示。具体包括前端JavaScript实现DOM元素的动态创建与更新，后端Servlet如何模拟数据库数据并转换为JSON格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：模拟从数据库取得数据，手动打包成json格式(没用jar包)。前段页面有一个按钮，点击按钮，自动将数据库的数据显示在一个表格中(异步刷新 Ajax)。

1.前段页面的代码，Ajax用的是get请求.

<body>
	<input type="button" onclick="showUser()" value="submit" />
</body>
<script>
	var xhr;
	try {
		xhr = new XMLHttpRequest();
	} catch (e) {

		xhr = new ActiveXObject("Micosoft.XMLHttp");
	}

	function showUser() {
		xhr.open("get", "SearchServlet", true);
		xhr.send(null);
		xhr.onreadystatechange = callback;
	}
	function callback() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {

				//dom自动生成表格
				var persontable = document.createElement("table");//创建表格
				persontable.setAttribute("border", "1");//对表格设置属性
				persontable.setAttribute("width", "80%");

				var newRow0 = persontable.insertRow(0);//创建一行
				var newCell0 = newRow0.insertCell(0);//创建一个单元格
				newCell0.innerHTML = "姓名";//
				var newCell1 = newRow0.insertCell(1);
				newCell1.innerHTML = "年龄";

				//获取响应数据
				var responseText1 = xhr.responseText;//得到响应数据
				var persons = eval("(" + responseText1 + ")");//解析json格式

				//将得到的数据展现成行数据
				for ( var i = 0; i < persons.length; i++) {
					person = persons[i];
					var newPersonRow = persontable.insertRow(i + 1);
					var newPersonCell0 = newPersonRow.insertCell(0);
					newPersonCell0.innerHTML = person.name;
					var newPersonCell1 = newPersonRow.insertCell(1);
					newPersonCell1.innerHTML = person.age;
				}

				//将生成的表格，追加到body中
				document.getElementsByTagName("body")[0]
						.appendChild(persontable);
			}
		}
	}
</script>

2.servlet中的代码

response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		//模拟从数据库获得数据
		List<Person> lists = new ArrayList<Person>();
		lists.add(new Person("ZhangSan",11));
		lists.add(new Person("LiSi",12));
		lists.add(new Person("wangWu",13));
		//手动打包json格式
		StringBuffer buffer=new StringBuffer();
		buffer.append("[");
		for(int i=0;i<lists.size();i++){
			if(i!=0){
				buffer.append(",");
			}
			buffer.append("{");
			buffer.append("name:");
			buffer.append("'"+lists.get(i).getName()+"',");
			buffer.append("age:");
			buffer.append("'"+lists.get(i).getAge()+"'");
			buffer.append("}");
		}
		buffer.append("]");
		out.print(buffer.toString());
		out.flush();
		out.close();

代码比较简单，用处却还可以。

快乐学习，快乐编程！