jsp+servlet+ajax实现无刷新增删改查数据库

最近写了个数据库增删改查的小程序，有几个地方碰到了难题，今天整理下来。

主要实现的功能是在一个页面上实现数据库查询、删除、插入、更改。而且在操作时尽可能少的刷新页面，主要是用AJAX技术。

难题1：查询数据库数据时如何解析XML数据。

首先生成一个请求对象，请求对象向服务器发送请求，服务器端的servlet会查询出数据库所有的数据，这些数据需要表示成为XML数据。

conn = connect();

stmt = conn.createStatement();

String sql = "select * from Tb";

rs = stmt.executeQuery(sql);

PrintWriter out = response.getWriter();

out.println("<?xml version='1.0' encoding='UTF-8'?>");

out.println("<table>");

while(rs.next()){

out.println("<device>");

out.println("<id>"+String.valueOf(rs.getInt("id"))+"</id>");

out.println("<deviceid>"+String.valueOf(rs.getInt("deviceid"))+"</deviceid>");

out.println("<subdevicename>"+rs.getNString("subdevicename")+"</subdevicename>");

out.println("<subdevicetag>"+rs.getNString("subdevicetag")+"</subdevicetag>");

out.println("<orderno>"+String.valueOf(rs.getInt("orderno"))+"</orderno>");

out.println("</device>");

}

out.println("</table>");

out.flush();

out.close();

不要忘记这一句：response.setContentType("text/xml");

response.setCharacterEncoding("utf-8");

然后浏览器得到服务器的响应之后，要解析XML数据，IE浏览器和FireFox浏览器解析xml的方式不同，所以可以先判断一下浏览器的类型。

if(navigator.userAgent.indexOf("MSIE")>0) { //IE浏览器

var doc = new ActiveXObject("MSxml2.DOMDocument")

doc.loadXML(xmlhttp.responseText);

devices=doc.getElementsByTagName("device");

}

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ //firefox浏览器

devices=xmlhttp.responseXML.getElementsByTagName("device");

}

难题2：xml数据如何表示为表格

for(i=0;i<device.length;i++){

id = device[i].getElementsByTagName("id")[0].firstChild.nodeValue;

deviceid = device[i].getElementsByTagName("deviceid")[0].firstChild.nodeValue;

subdevicename = device[i].getElementsByTagName("subdevicename")[0].firstChild.nodeValue;

subdevicetag = device[i].getElementsByTagName("subdevicetag")[0].firstChild.nodeValue;

orderno = device[i].getElementsByTagName("orderno")[0].firstChild.nodeValue;

addTableRow(id, deviceid, subdevicename,subdevicetag,orderno);

}

function addTableRow(id, deviceid, subdevicename,subdevicetag,orderno) {

var row = document.createElement("tr");

var cell = createCellWithText(id);

row.appendChild(cell);

cell = createCellWithText(deviceid);

row.appendChild(cell);

cell = createCellWithText(subdevicename);

row.appendChild(cell);

cell = createCellWithText(subdevicetag);

row.appendChild(cell);

cell = createCellWithText(orderno);

row.appendChild(cell);

cell = createCellShanChu(id);

row.appendChild(cell);

cell = createCellGengGai();

row.appendChild(cell);

document.getElementById("tt").appendChild(row);

}

function createCellWithText(text) {

var cell = document.createElement("td");

cell.innerHTML="<input type='text' value='"+text+"'>";

return cell;

}

function createCellShanChu(id) {

var cell = document.createElement("td");

cell.innerHTML="<button onclick='shanchu("+id+",this.parentElement.parentElement.rowIndex);'>删除</button>";

return cell;

}

function createCellGengGai() {

var cell = document.createElement("td");

cell.innerHTML="<button onclick='validate(this.parentElement.parentElement.rowIndex);'>更改</button>";

return cell;

}

本文出自 “厚积薄发” 博客，转载请与作者联系！