問題描述:模擬從數據庫取得數據,手動打包成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();
代碼比較簡單,用處卻還可以。
快樂學習,快樂編程!