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

問題描述:模擬從數據庫取得數據,手動打包成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();

代碼比較簡單,用處卻還可以。


快樂學習,快樂編程!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章