`
yaolifei
  • 浏览: 23805 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

JQuery Ajax xml

阅读更多

刚学习JQuery,个人感觉十分好用,今天试验了以下JQuery的Ajax,感觉还不错

 

1.两个页面:一个请求页面 index.jsp,一个处理页面 doPost.jsp

2.一个js:test.js

3.一个业务类,用于从数据库读数据:TestJQuery.java

4.代码:

 

请求页面代码:index.jsp

<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/test.js"></script>
  </head>
  
  <body>
    	<a href="#">JQuery Ajax 异步提交</a>
    	<div>结果:</div>
  </body>
</html>

 

 js代码:

$(function(){
	$("a").click( function(){
		var date = new Date();
		$.post("doPost.jsp",{date:date.getSeconds(),name:"yaolifei"}, function(xml){	//xml表示请求成功后的返回值
			$(xml).find("item").each( function(i) {
				$("div").append("<br />"+(i+1)+"  "+$(this).text()+"  "+$(this).next().text()); //这里的this表示xml文件中每个item项
			},"xml");
		});
	});
});

 

处理页面代码:doPost.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="dao.TestJQuery" %>
<%
	request.setCharacterEncoding("utf-8");

	//String name = request.getParameter("name");
	response.setCharacterEncoding("utf-8");
	response.setContentType("text/xml");
	
	TestJQuery t = new TestJQuery();
	StringBuffer sb = new StringBuffer();
	List<String> l = t.test();	//调用业务类方法
	
	sb.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
	sb.append("<root>");
	for(String a : l){
		sb.append("<item>");
		sb.append(a);
		sb.append("</item>");
		sb.append("<name>");
		sb.append(a);
		sb.append("</name>");
	}
	sb.append("</root>");
	out.print(sb.toString());

%>

 

业务类代码:TestJQuery.java

public List<String> test(){
	String sql = "select * from tbl_user";
	List<String> l = new ArrayList<String>();
	try {
		conn = this.getConnction();
		pstmt = conn.prepareStatement(sql);
		rs = pstmt.executeQuery();
		while(rs.next()){
			l.add(rs.getString(2));
		}
		return l;
	} catch (SQLException e) {
		e.printStackTrace();
	}finally{
		this.closeConn(conn, pstmt, rs);
	}
	return null;
}

 

 浏览器中查看:

 

JQuery Ajax 异步提交

结果:
1 test test
2 user1 user1
3 user2 user2
4 user3 user3
5 new Name2 new Name2
6 stan stan
7 ss ss
8 aptech aptech
9 Hibernate user Hibernate user
10 1 1
11 2 2
12 4 4
13 a a

其间,处理页面读出的输出流是一个xml文件:

  <?xml version="1.0" encoding="utf-8" ?> 
- <root>
  <item>test</item> 
  <name>test</name> 
  <item>user1</item> 
  <name>user1</name> 
  <item>user2</item> 
  <name>user2</name> 
  <item>user3</item> 
  <name>user3</name> 
  <item>new Name2</item> 
  <name>new Name2</name> 
  <item>stan</item> 
  <name>stan</name> 
  <item>ss</item> 
  <name>ss</name> 
  <item>aptech</item> 
  <name>aptech</name> 
  <item>Hibernate user</item> 
  <name>Hibernate user</name> 
  <item>1</item> 
  <name>1</name> 
  <item>2</item> 
  <name>2</name> 
  <item>4</item> 
  <name>4</name> 
  <item>a</item> 
  <name>a</name> 
  </root>

 

    很简单吧,就是这么简单。

 

    总结一下:

   1. JQuery读取xml文件的元素和读html是一样的

   2.$.post("doPost.jsp",{date:date.getSeconds(),name:"yaolifei"}, function(xml){},"xml");

      这里用的是post方法提交,传了两个参数,date 参数的作用是加上一个时间戳,防止浏览器的缓存,因为如果你的请求没有改变,浏览器会从缓存中反馈数据,加上个时间来动态的改变请求参数。

   3.function(xml){}是回调函数,是在 success 时调用的,xml是doPost.jsp页面处理后的返回值。

   4."xml"表示返回的文件类型,默认是xml或者html,所以可以省略不写。

 

分享到:
评论
1 楼 yaolifei 2009-10-05  
毛, 叫你帮我看看,小样,去买手机了!去死吧!

相关推荐

    jquery ajax xml 实现select联动

    总结起来,这个示例展示了如何使用jQuery的Ajax功能与XML数据结合,创建动态联动的下拉列表。通过XML文件存储数据,可以方便地扩展和维护选项。此外,使用事件监听器确保了用户交互时的实时响应,提高了用户体验。这...

    JQuery+AJAX处理XML数据

    **jQuery + AJAX 处理 XML 数据** 在网页开发中,jQuery 和 AJAX 技术的结合是获取和操作服务器端数据的常见方式。本篇将详细探讨如何使用 jQuery 的 AJAX 功能来处理 XML(可扩展标记语言)数据。 **1. jQuery 和...

    Jquery操作xml_Demo

    通过这个简单的 jQuery 和 XML 操作示例,我们了解了如何使用 jQuery 的 `$.ajax()` 函数加载 XML 文件,以及如何使用 jQuery 的选择器和方法来解析和显示 XML 数据。在实际应用中,可以根据需求进行更复杂的数据...

    Jquery Ajax分页(有实例)

    jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和XML)技术,可以实现动态、高效的分页效果。本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能...

    jquery结合ajax和xml实现省市县三级联动

    在这个过程中,jQuery、AJAX 和 XML 技术起到了关键作用。下面我们将详细讲解如何利用这些技术来实现这个功能。 首先,jQuery 是一个流行的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。在这里,jQuery...

    jquery读取xml

    通过`jQuery.parseXML()`解析XML字符串,使用`find()`和`each()`遍历节点,结合XPath或`$.ajax()`获取服务器上的XML,以及有效地处理错误,你可以轻松地构建功能丰富的XML应用程序。在实际项目中,根据具体需求选择...

    JQuery 实现XML树形菜单

    加载XML文件:使用jQuery的`$.ajax()`或`$.get()`方法加载XML文件(如`work.xml`)。\n2. 解析XML:使用`parseXML()`函数将返回的XML字符串转化为DOM对象,方便进行DOM操作。\n3. 遍历XML节点:递归遍历XML文档的每...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。在这个实例源码中,我们将深入探讨如何利用ASP、jQuery和AJAX实现无刷新的数据操作,包括添加、删除、修改和...

    jquery.json2xml.js和jquery.xml2json.js

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和Ajax交互。在jQuery的基础上,`jquery.json2xml.js` 和 `jquery.xml2json.js` 这两个脚本提供了方便的方法来在JSON和XML之间进行转换,从而让开发者...

    jqueryajax jquery ajax

    jQuery AJAX支持多种数据格式,包括JSON、XML、HTML和文本。使用`dataType`参数设置期望的响应类型。例如,从服务器接收JSON数据: ```javascript $.ajax({ url: 'example.php', dataType: 'json', success: ...

    Jquery ajax方式读取txt文件、Jquery分页.

    AJAX(异步JavaScript和XML)允许我们在不刷新整个页面的情况下更新部分网页内容。在jQuery中,`$.ajax()`函数是实现这一目标的核心。要读取TXT文件,我们可以这样做: ```javascript $.ajax({ type: 'GET', // ...

    html静态页JQuery ajax示例demo 源码

    `$.ajax()`是jQuery提供的核心AJAX函数,它允许我们配置各种选项来定制请求,如URL、请求类型(GET或POST)、数据类型(JSON、XML、HTML等)以及请求成功或失败的回调函数。 在C# ASP.NET环境下,我们可以创建一个...

    JqueryAjax简单实例

    在这个"JqueryAjax简单实例"中,我们主要关注如何在Visual Studio 2005 C#环境下利用jQuery实现AJAX的功能。首先,我们需要确保项目中已经引入了jQuery库。这通常通过在HTML头部添加jQuery库的CDN链接或者将jQuery....

    jquery ajax源代码

    AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过 jQuery,开发者可以轻松地实现 AJAX 功能,而无需了解底层的 XMLHttpRequest 对象。 #### 二、示例...

    Jquery Ajax简易计算器

    **jQuery AJAX简易计算器** 在Web开发中,动态交互是提升用户体验的重要手段,而jQuery的AJAX功能正是实现这种交互的核心技术。本项目“jQuery AJAX简易计算器”旨在展示如何利用jQuery库与服务器端进行异步数据...

    Jquery ajax json 总结

    首先,JQuery 的 AJAX(Asynchronous JavaScript and XML)功能允许开发者在不刷新整个网页的情况下与服务器进行通信,实现了页面的动态更新。它通过发送 HTTP 请求获取数据,然后在后台处理这些数据,最终更新页面...

    php Jquery ajax 登陆

    3. **AJAX(Asynchronous JavaScript and XML)**:尽管名称包含XML,但现代AJAX通常涉及JSON格式的数据交换。它允许我们在不刷新整个页面的情况下与服务器进行异步通信。 下面是一个简单的AJAX登录流程: 1. **...

    jQuery Ajax过滤器

    在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于页面异步更新,提供更流畅的用户体验。jQuery库简化了Ajax操作,它内置了一系列强大的Ajax方法,其中包括Ajax过滤器功能,使得在处理数据时...

    jqueryAjax_无刷新调用另一页实例

    "jqueryAjax_无刷新调用另一页实例"这个标题意味着我们将探讨如何利用jQuery的AJAX功能实现页面的动态加载。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及AJAX交互。...

    传智播客 jQuery ajax 课件

    在当今的Web开发中,jQuery AJAX(异步JavaScript和XML)技术扮演着至关重要的角色。它允许开发者在不刷新整个页面的情况下与服务器进行数据交换,提高了用户体验,使得网页交互更加流畅。本篇文章将深入解析jQuery...

Global site tag (gtag.js) - Google Analytics