浏览 3990 次
|
锁定老帖子 主题：JQuery Ajax xml
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-07-15
最后修改：2009-07-26
刚学习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;
}
浏览器中查看：
结果：
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，所以可以省略不写。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
