最近写了个数据库增删改查的小程序,有几个地方碰到了难题,今天整理下来。
主要实现的功能是在一个页面上实现数据库查询、删除、插入、更改。而且在操作时尽可能少的刷新页面,主要是用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 οnclick='shanchu("+id+",this.parentElement.parentElement.rowIndex);'>删除</button>";
return cell;
}
function createCellGengGai() {
var cell = document.createElement("td");
cell.innerHTML="<button οnclick='validate(this.parentElement.parentElement.rowIndex);'>更改</button>";
return cell;
}
转载于:https://blog.51cto.com/geda1223/929914