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

来源：互联网发布：螺旋楼梯计算软件编辑：程序博客网时间：2024/05/01 23:27

问题描述：模拟从数据库取得数据，手动打包成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();

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

快乐学习，快乐编程！

阅读全文

1 0