Ajax解析xml文件1

最新推荐文章于 2021-08-06 10:08:56 发布

whylyq

最新推荐文章于 2021-08-06 10:08:56 发布

阅读量1k

点赞数

文章标签： ajax xml servlet 数据库 mvc function

本文链接：https://blog.csdn.net/whylyq/article/details/6521445

版权

Ajax解析xml文件1

一、Ajax操作数据库解析xml文件并实现查询和添加

AJAX 可用来与数据库进行动态通信。

AJAX 数据库实例

下面的例子将演示网页如何通过 AJAX 从数据库读取信息和添加信息：

使用mvc框架

MVC (Modal View Controler)本来是存在于Desktop程序中的，M是指数据模型，V是指用户界面，C则是控制器。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据你可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新

实现代码

1.jsp页面

selectEmp()函数是Ajax封装请求信息并向相映的Servlet中发送请求，再调用listEmps(doc)函数;listEmps(doc)函数解析xml文件并输到界面;

insertEmp()利用Ajax中post()方法封装请求信息再向servlet发送请求

window.onload = function() {

$("addemp").style.display = "none";

}

function selectEmp() {

var xhr = getXhr();

xhr.open("get", "./listEmp.do", true);

xhr.send();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

var doc = xhr.responseXML;

listEmps(doc);

}

function insertEmp() {

$("addemp").style.display = "block";

var xhr = getXhr();

xhr.open("post", "./addEmp.do", true);

var empno = $("eno").value;

var ename = $("ename").value;

var mgr = $("mgr").value;

var hiredate = $("hiredate").value;

var job = $("job").value;

var sal = $("sal").value;

var comm = $("comm").value;

var deptno = $("deptno").value;

var params = "empno=" + empno + "&ename=" + ename + "&mgr=" + mgr+ "&hiredate=" + hiredate + "&job=" + job + "&sal=" + sal+ "&comm=" + comm + "&deptno=" + deptno;

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send(params);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

var doc = xhr.responseXML;

listEmps(doc);

}

function listEmps(doc) {

var root = doc.documentElement;

var emps = root.childNodes;

var listemps = document.getElementById("listemps");

listemps.innerHTML = "";

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

if (emps[i].nodeType == 1) {

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

var empcs = emps[i].childNodes;

for ( var j = 0; j < empcs.length; j++) {

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

if (empcs[j].nodeType == 1) {

emptd.appendChild(document .createTextNode(empcs[j].firstChild.nodeValue));

emptr.appendChild(emptd);

}

listemps.appendChild(emptr);

}

</script>

当用户在页面上点击"查看所有"时，会执行名为 "selectEmp()" 的函数。该函数再调用"listEmps(doc)";当用户在页面上点击"添加"时，会执行名为 "insertEmp() " 的函数

<body>中调用

</tbody>

员工编号： <input type="text" name="empno" id="eno" />

员工姓名：<input type="text" name="ename" id="ename" />

岗位:<input type="text" name="job" id="job" />

员工入职日期：<input type=text name="hiredate" id="hiredate" />

领导:<input type="text" name="mgr" id="mgr" /> 薪水:<input type="text" name="sal" id="sal" />

奖金:<input type="text" name="comm" id="comm" />

部门:<select name="deptno" id="deptno">

<option value="10">请选择部门</option></select>

</div>

2.Servlet中代码

当Ajax发送请求到listEmp.do(Servlet)中，Servlet从数据库得到信息，再将信息以Xml格式写出，等待Ajax解析

listEmp.do

EmpServiceImpl esi = new EmpServiceImpl();

List<Emp> emps = esi.findAll();

//如果以xml数据返回响应必须设置头位如下方式,并且放在响应的第一行

response.setContentType("text/xml;charset=UTF-8");

PrintWriter out = response.getWriter();

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

out.println("<emps>");

for(Emp emp:emps){

out.println("<emp>");

out.println("<empno>"+emp.getEmpno()+"</empno>");

out.print("<ename>"+emp.getEname()+"</ename>");

out.println("<job>"+emp.getJob()+"</job>"); out.print("<hiredate>"+emp.getHiredate()+"</hiredate>");

out.println("<mgr>"+emp.getMgr()+"</mgr>");

out.print("<sal>"+emp.getSal()+"</sal>");

out.print("<comm>"+emp.getComm()+"</comm>");

out.print("<deptno>"+emp.getDeptno()+"</deptno>");

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

}

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

out.flush();

out.close();

当Ajax发送请求到addEmp.do(Servlet)中，Servlet根据Ajax传输的数据向数据库添加相映的数据

addEmp.do

request.setCharacterEncoding("UTF-8");

String eno = request.getParameter("empno"); //整型

int empno = Integer.valueOf(eno);

String ename = request.getParameter("ename");

String job = request.getParameter("job");

String hiredate1 = request.getParameter("hiredate");//日期型

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");

Date hiredate=null;

try {

hiredate = sdf.parse(hiredate1);

} catch (ParseException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

String mgr1 = request.getParameter("mgr"); //整型

int mgr = Integer.valueOf(mgr1);

String sal1 = request.getParameter("sal"); //浮点型

double sal = Double.valueOf(sal1);

String comm1 = request.getParameter("comm"); //浮点型

double comm = Double.valueOf(comm1);

String deptno1 = request.getParameter("deptno");//整型

int deptno = Integer.valueOf(deptno1);

Emp emp = new Emp();

emp.setEmpno(empno);

emp.setEname(ename);

emp.setJob(job);

emp.setHiredate(hiredate);

emp.setMgr(mgr);

emp.setSal(sal);

emp.setComm(comm);

emp.setDeptno(deptno);

EmpServiceImpl esi = new EmpServiceImpl();

esi.insert(emp);

request.getRequestDispatcher("listEmp.do").

forward(request, response);

whylyq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
Ajax解析xml文件1

Ajax解析xml文件1一、Ajax操作数据库解析xml文件并实现查询和添加AJAX 可用来与数据库进行动态通信。AJAX 数据库实例下面的例子将演示网页如何通过 AJAX 从数据库读取信息和添加信息：使用mvc框架MVC (Modal View Controler)本来是存在于Desktop程序中的，M是指数据模型，V是指用户界面，C则是控制器。使用MVC的目的是将
复制链接

扫一扫