jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).
1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件，例如表单。
2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：
$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图
alert(data);
//alert(textStatus);//请求状态：success，error等等。
当然这里捕捉不到error，因为error的时候根本不会运行该回调函数
//alert(this);
});
示例代码：
$.getJSON("servlet/TableServlet?flag=query", "", function(response){
$.each(response,function(i){
sel.src.add({id: response[i].id, name: response[i].name, address: response[i].address});
})
sel.render();
});
});
下面我做了一个 利用jQuery Ajax 做了以小小的Demo;
其中java 部分主要代码：
package com.bx.web.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import com.bx.dao.impl.HibernateUserDAO;
import com.bx.hibernate.User;
public class TableServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 5469871499359894890L;
User user=new User();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String flag=request.getParameter("flag");
if(flag!=null&&"flag".equals("flag")){
query(request,response);
}
}
public void query(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
HibernateUserDAO test=new HibernateUserDAO();
List<User> list = test.getUserList();
for(User userlist:list){
System.out.println("Table UserName+++"+userlist.getName()+
"......Hibernate Dbconfig....User.Address"+userlist.getAddress());
}
JSONArray jr=JSONArray.fromObject(list);
String jsonUser=jr.toString();
PrintWriter out = response.getWriter();
out.print(jsonUser);
out.flush();
out.close();
}
}
jsp中的代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tabledemo</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/PagerView.js" type="text/javascript"></script>
<script src="scripts/SelectorView.js" type="text/javascript"></script>
<script src="scripts/SortView.js" type="text/javascript"></script>
<script src="scripts/TableView.js" type="text/javascript"></script>
<script type="text/javascript">
$ (document).ready (function() {
var sel = new SelectorView('sel_div');
sel.src.header = {
id : '编号',
name : '姓名',
address: '地址'
};
sel.dst.header = {
id : '编号',
name: '姓名',
address: '地址'
};
sel.src.dataKey = 'id';
sel.src.title = '可选';
sel.dst.dataKey = 'id';
sel.dst.title = '已选';
sel.render();
$.getJSON("servlet/TableServlet?flag=query", "", function(response){
$.each(response,function(i){
sel.src.add({id: response[i].id, name: response[i].name, address: response[i].address});
})
sel.render();
});
});
</script>
</head>
<body>
<div id="sel_div"></div>
</body>
</html>
最后在浏览器URL中输入：http://localhost:8080/TableWebProject/pagerList.jsp运行结果
一些资源
一个jQuery的Ajax Form表单插件：http://www.malsup.com/jquery/form/
一个专门生成Loading图片的站点：http://ajaxload.info/ 大家觉得那些Loading比较炫的可以在这里跟帖晒一下，方便大家取用，嘎嘎
posted on 2011-03-02 15:11
龍ぜ殘剑 阅读(350)
评论(0) 编辑 收藏