初探jQuery的Ajax特性

来源：互联网发布：长春数据库工程师招聘编辑：程序博客网时间：2024/04/30 01:21

最近刚接触jQuery，初探Ajax功能，完成了一个根据产品分类查询产品的级联下拉列表的功能。下面具体介绍实现过程。

注意：本示例需要jQuery1.2.6的支持。

1、下载jQuery1.2.6，并在页面中导入js

<script type="text/javascript" language="javascript" src="js/jquery/jquery-1.2.6.min.js"></script>

2、写一个基于jQuery且可以重用的调用Ajax的方法

// 发送request请求 
// 注意：需要jQuery的支持
// url:要请求的URL，如：/xxx/AjaxAction.do
// data:要请求的参数，与url一起构成一个完整的URL请求，如：method=list&id=123
// callback:回调函数的名称，如：send_request_callback,请求成功后，会调用send_request_callback函数
function ajax_request(url,data,callback){
    jQuery.ajax({
       type: "POST",    // GET,POST 
       url: url,   // AjaxAction.do 
       data: data, // method=list&id=123 
       success: function(responseText){
           var commond = callback + "(/"" + responseText + "/")";
           eval(commond);
       },
       error: function (XMLHttpRequest, textStatus, errorThrown) {
           alert("Ajax请求失败!");
       }
    });
}

3、完整的页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>根据分类查询产品的Ajax实现</title>
<script type="text/javascript" language="javascript" src="js/jquery/jquery-1.2.6.min.js"></script>
<script language="javascript">
// 发送request请求
// 注意：需要jQuery的支持
// url:要请求的URL，如：/xxx/AjaxAction.do
// data:要请求的参数，与url一起构成一个完整的URL请求，如：method=listid=123
// callback:回调函数的名称，如：send_request_callback,请求成功后，会调用send_request_callback函数
function ajax_request(url,data,callback){
    jQuery.ajax({
       type: "POST",    // GET,POST
       url: url,   // AjaxAction.do
       data: data, // method=listid=123
       success: function(responseText){
           var commond = callback + "(/"" + responseText + "/")";
           eval(commond);
       },
       error: function (XMLHttpRequest, textStatus, errorThrown) {
           alert("Ajax请求失败!");
       }
    });
}
// 发送请求
function select_chanpin(){
    // 分类
    var fenlei = document.getElementById("fenlei").value;
    if(fenlei != ""){
        var url = "/AjaxAction.do";
        var data = "method=select_chanpin&fenlei=" + fenlei;
        ajax_request(url,data,"select_chanpin_callback");
    } else {
        document.getElementById("chanpin_span").innerHTML = "<select name='chanpin'><option value=''>请先选择分类</option></select>";
    }
}
// 回调函数
function select_chanpin_callback(responseText){
    // 假设请求回应后返回的是HTML代码串，则直接显示；如果是XML串，还需要解析，这里略去。
    // 返回的HTML代码串示例：<select name='chanpin'><option value='产品一'>产品一</option><option value='产品二'>产品二</option></select>
    document.getElementById("chanpin_span").innerHTML = responseText;
}
</script>
</head>
<body>
分类：
<select name="fenlei" onchange="select_chanpin()">
    <option value="1">分类一</option>
    <option value="2">分类二</option>
    <option value="3">分类三</option>
</select>
产品：
<span id="chanpin_span">
    <select name="chanpin">
        <option value="">请先选择分类</option>
    </select>
</span>
</body>
</html>

4、后台AjaxAction的实现

package com.xx.yy.action;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.velocity.tools.generic.EscapeTool;
import com.dm.wmf.core.ActionContext;
import com.dm.wmf.core.BaseDispatchAction;
import com.dm.wmf.service.CommonService;
import com.dm.wmf.util.RequestUtils;
public class AjaxAction extends BaseDispatchAction {
    /**
     * 查询产品列表
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @param context
     * @return
     * @throws Exception
     */
    @SuppressWarnings("unchecked")
    public ActionForward select_CPMC(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response,
            ActionContext context) throws Exception {
        StringBuffer sb = new StringBuffer();
        EscapeTool esc = new EscapeTool();
        // 分类（名称） 
        String fenlei = RequestUtils.getParameter(request, "fenlei", null);
        fenlei = AjaxEncode(fenlei); // 解码，Ajax默认用的是UTF-8编码 
        
        // 如果分类不为空 
        if(fenlei != null){
            // 根据分类查询产品，可以是从数据库等查询，这里略去 
            List chanpin_list = ...;
            
            // 拼接select组件 
            sb.append("<select name='chanpin'>");
            for (int i = 0; i < chanpin_list.size(); i++) {
                Map map = (Map)chanpin_list.get(i);
                String CPMC = (String)map.get("CPMC");
                CPMC = esc.html(CPMC); // 此处最好进行转码，否则会出现单引号或双引号等字符，我用的是VelocityTools的EscapeTool转码功能 
                sb.append("<option value='" + CPMC + "'>" + CPMC + "</option>");
            }
            sb.append("</select>");
        } else {
            sb.append("<select name='").append(select_name).append("'>");
            sb.append("<option value=''>Ajax参数不正确</option>");
            sb.append("</select>");
        }
        
        response.setHeader("Cache-Control", "no-cache, must-revalidate");
        response.setContentType("text/html;charset=GBK");
        response.getWriter().write(sb.toString());
        
        return null;
    }
    
    /**
     * 对Ajax传过来的字符串进行解码
     * @param str
     * @return
     */
    private String AjaxEncode(String str){
        String ret = null;
        try {
            if(str != null){
                ret = new String(str.getBytes(),"UTF-8");
            }
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        
        return ret;
    }
}