`
fatedgar
  • 浏览: 135193 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

用ajax来读xml(servlet生成的)用到JQuery技术

阅读更多
准备:
下载Jquery.js文件、dom4j.jar包
新建一个html页面:
导入JQuery文件:
 <script type="text/javascript" src="jquery-1.7.1.js"></script>

在body里写入:
 <select id="name">
  		<option value="zhangsan">zhangsan</option>
  		<option value="lisi">lisi</option>
  	</select>
	<input type="button" id="button1" value="点击看一看">

在head里用JQuery来写ajax代码(比用Javascript写简单些)
<script type="text/javascript">
		$(function()
		{
			$("#button1").click(function()
			{
				$.post("../xmlservlet",{name:$("#name").val()},function(returnedData,status)
				{
					var id=$(returnedData).find("id").text();
					var name=$(returnedData).find("name").text();
					var age=$(returnedData).find("age").text();
					var address=$(returnedData).find("address").text();
					var html="<table width='60%' border='1' align='center'>"
					+"<tr><th>id</th><th>name</th><th>age</th><th>address</th></tr>"
					+"<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr>"
					+"</table>";
					
					$("body table:eq(0)").remove();
					$("body").append(html);
				})
			});
		});
	</script>

现在界面搞定了开始servlet层:
新建个Javabean名字叫Student:
package com.niit.model;

public class Student
{
	private int id;
	private String name;
	private int age;
	private String address;
	public int getId()
	{
		return id;
	}
	public void setId(int id)
	{
		this.id = id;
	}
	public String getName()
	{
		return name;
	}

	public void setName(String name)
	{
		this.name = name;
	}
	public int getAge()
	{
		return age;
	}
	public void setAge(int age)
	{
		this.age = age;
	}
	public String getAddress()
	{
		return address;
	}
	public void setAddress(String address)
	{
		this.address = address;
	}
}

在新建个servlet来处理
package com.niit.test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;

import com.niit.model.Student;

public class Xmlservlet extends HttpServlet
{

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		String name = request.getParameter("name");
		// TODO 调用service得到Student对象。这里是MOCK
		Student student = new Student();
		if ("zhangsan".equals(name))
		{
			student.setId(1001);
			student.setName(name);
			student.setAge(28);
			student.setAddress("上海");
		}
		else if ("lisi".equals(name))
		{
			student.setId(3321);
			student.setName(name);
			student.setAge(39);
			student.setAddress("南京");
		}
		// 下面构建XML
		// 方法1:直接字符串连接,js可以解析该内容
		// 方法2:可以使用dom4j等API生成XML。dom4j需要下载jar包,是比较常用的xml开源API
		Document document = DocumentHelper.createDocument();// 构建Document对象
		Element rootelement = document.addElement("students");// 创建根元素
		rootelement.addComment("This is a comment!");// 添加注释
		Element studentelement = rootelement.addElement("student");
		Element idelement = studentelement.addElement("id");
		Element namelement = studentelement.addElement("name");
		Element agelement = studentelement.addElement("age");
		Element addresselement = studentelement.addElement("address");

		idelement.setText("" + student.getId());
		namelement.setText(student.getName());
		agelement.setText("" + student.getAge());
		addresselement.setText(student.getAddress());

		response.setContentType("text/xml;charset=utf-8");
		response.setHeader("pragma", "no-cache");
		response.setHeader("cache-control", "no-cache");

		PrintWriter out = response.getWriter();
		OutputFormat format=OutputFormat.createPrettyPrint();//用来设置文本格式的。可读性较好的
		XMLWriter xmlwriter=new XMLWriter(out,format);
		xmlwriter.write(document);
		out.flush();
		out.close();
	}

}

注意一点那个Document对象是org.dom4j包下的。
分享到:
评论

相关推荐

    Jquery+ajax+json+servlet

    在IT行业中,`jQuery`、`Ajax`、`JSON` 和 `Servlet` 是四个非常重要的技术,它们在构建现代Web应用程序中发挥着关键作用。让我们深入探讨这些技术及其相互之间的结合。 首先,`jQuery` 是一个高效、轻量级的...

    Servlet jQuery Ajax

    Servlet、jQuery和Ajax是Web开发中的重要技术,它们在构建动态、交互性强的网页应用中起着关键作用。这篇博文将深入探讨这三个概念及其相互之间的关系。 Servlet是Java平台上的一个标准,它允许开发者创建服务器端...

    ajax+servlet+jquery+jsp示例

    总结来说,"ajax+servlet+jquery+jsp示例"展示了如何使用现代Web开发技术进行前后端交互,实现数据的动态加载,提高用户体验。Ajax使得页面无刷新更新成为可能,jQuery简化了JavaScript代码,Servlet作为Java后端...

    Servlet利用Ajax,JQuery交互Json

    在现代Web开发中,Servlet、Ajax、JQuery和Json是不可或缺的技术组件,它们共同构建了高效、动态的用户界面。让我们深入探讨这些技术及其在实际应用中的交互。 Servlet是Java Web开发中的一个核心部分,它是一种...

    ajax+dwr+servlet+jQuery开发的网上订餐系统!

    本系统采用的技术栈包括AJAX、Direct Web Remoting (DWR)、Servlet以及jQuery,这些技术在构建高效、动态的Web交互方面发挥着关键作用。 首先,AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的...

    jsp+servlet+el+jquery+ajax增删改mysql

    本项目是一个基于J2EE的简单Web应用程序,主要使用了JSP(JavaServer Pages)、Servlet、EL(Expression Language)以及jQuery和Ajax技术,实现了对MySQL数据库的无刷新增删改操作。这个demo是初学者理解这些技术...

    基于MVC用JSPServlet实现JPetStore实验报告+使用AJAX和jQuery改善用户体验实验报告.doc

    在本实验报告中,我们将探讨如何使用MVC(Model-View-Controller)设计模式通过JSP和Servlet实现JPetStore应用程序,并进一步利用AJAX和jQuery技术优化用户体验。实验旨在加深对Web应用开发的理解,特别是Java相关...

    JSP&Servlet&JavaScript&Ajax&jQuery源代码

    这些文件名称列表揭示了一个关于Web开发的教程结构,主要涵盖了JSP(JavaServer Pages)、Servlet、JavaScript、Ajax和jQuery这五个关键的技术。接下来,我们将详细探讨这些技术及其在实际应用中的重要性。 **JSP...

    servlet-Ajax-jQuery学习手册

    整篇手册旨在通过详细的概念解释、实践步骤和工具使用,为学习者铺就一条从基础到实践的Servlet-Ajax-jQuery学习之路,使他们能够快速全面地了解和掌握这三项关键技术,为未来的Web开发打下坚实的基础。

    Mysql + jsp +javabean+ jquery +ajax+servlet等的例子综合

    【标题】"Mysql + jsp +javabean+ jquery +ajax+servlet等的例子综合"是一个涵盖多种技术的Web开发实战项目,旨在帮助开发者理解如何将这些技术有效地整合在一起,以构建动态、交互性强的Web应用程序。在这个项目中...

    jquery ajax servlet json简单demo

    【jQuery AJAX】jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理以及AJAX交互。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分...

    Servlet_jsp_ajax_jquery(含答案).doc

    在IT行业中,Servlet、JSP、Ajax和jQuery是Web开发中的关键技术。Servlet是Java服务器端编程的基础,用于处理和响应客户端请求。JSP(JavaServer Pages)是Servlet的一种简化方式,允许开发者在HTML中嵌入Java代码,...

    文字过滤(ajax+jquery+servlet)

    总的来说,"文字过滤(ajax+jquery+servlet)"项目展示了如何结合现代Web开发技术实现动态、实时的数据过滤,确保用户交互的合规性和安全性。通过学习这个项目,开发者可以深入理解Ajax的异步通信、jQuery的便利操作...

    Ajax+Servlet 实例

    对于IE7的兼容性,我们需要使用jQuery库,它提供了一个简单易用的接口来处理Ajax请求。例如: ```javascript // 引入jQuery库 &lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt; // 使用...

    Servlet+jsp+AJax的分页及增删改查

    在本文中,我们将深入探讨如何使用Servlet、JSP和Ajax技术实现一个完整的增删改查(CRUD)功能以及分页。Servlet是Java Web应用程序的一部分,用于处理客户端请求和响应。JSP则是一种动态网页技术,它允许在服务器端...

    简单的AJAX示例(JSP+servlet)

    1. **初始化AJAX请求**:在前端JSP页面,使用JavaScript(通常使用jQuery或其他库如axios或fetch API)创建AJAX请求,设置请求类型(GET或POST)、URL(指向Servlet)、数据(用户名)等参数。 2. **发送请求**:当...

    jsp+ajax+servlet+jdbc案例

    在IT行业中,JavaServer Pages (JSP)、Asynchronous JavaScript and XML (AJAX)、Servlets以及Java Database Connectivity (JDBC)是构建Web应用程序的基石技术。本案例将详细阐述如何利用这些基本技术,不依赖额外的...

    ajax从后台读json数据,jquery在页面简析

    在Java后端,你可以使用Spring MVC、Servlet或任何其他Java框架来处理Ajax请求。创建一个Controller方法,该方法接收请求,查询数据库或其他数据源,将结果转换为JSON格式,然后返回给前端。例如,使用Spring MVC的`...

    jquery+servlet展示XML树形结构

    "jQuery + Servlet + Ajax 展示XML树形结构"是一个典型的Web应用程序开发场景,它涉及到前端的交互、后端的数据处理以及异步通信技术。下面将详细解析这个主题中的关键知识点。 首先,**jQuery** 是一个流行的...

    servlet%Ajax$JQuery的对比

    ### servlet与Ajax、jQuery的对比 #### 一、Servlet概览 Servlet是一种由Sun Microsystems定义的标准,用于扩展Web服务器的功能。它可以被视为服务器端的小应用程序,能够处理来自客户端的HTTP请求并返回响应。...

Global site tag (gtag.js) - Google Analytics