jquery异步请求实例

1、用ajax

jsp代码如下：


$.ajax({                type:"get",                dataType:"json",                url:"<%=basePath%>actionSmUser.do?method=getUserMsgByUserId",                data:"userId="+userId,                success:function(msg){                    var data = eval("("+msg.responseText+")");                    alert($("#userName").val());                    $("#userName").val(data[0].userName);                                    }            });
2、用getJSON方式：



$.getJSON(url,function(data){                    if(data!=null && data!=""){                        $("#userIdInput").val(data[0].userId);                        $("#userNameInput").val(data[0].userName);                        $("#menusIdInput").val(data[0].menusId);                        $("#depIdInput").val(data[0].depId);                        $("#isValidInput").val(data[0].isValid);                        $("#userIdInput").attr("disabled",true);                    }                            });    两种台Action返回字符串的组织形式可采用JSONArray array 的方式，返回array.toJSONString();



















本文是要做一个二级联动，动态的。通过jquery返回json类型的数据，然后在jsp页面处理，生成第二级下拉列表菜单。
所需js库： jquery.js,json2.js
jar包:json-lib-2.2.3-jdk15.jar,ezmorph-1.0.6.jar


Java代码
<%@ page contentType="text/html; charset=UTF-8"%>  
<%@ taglib prefix="s" uri="/struts-tags"%>  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="json2.js"></script>  
  
<script type="text/javascript">  
jQuery(function($){  
var obj=$("#category");  
if(typeof obj != 'undefined' && obj !=''){  
    showGongdanType(obj.val());  
}  
});  
function onchangeShow(category){  
jQuery.ajax({  
url : "${contextPath}/assets/statistic/ajaxGetType.do",  
data : {statCategory : category},  // 传递参数  
type : "post",  
cache : false,  
dataType : "json",  
success:onchangecallback  
});  
}  
function onchangecallback(data){   
    document.all['type'].options.length = 0;  
    var str="<option value=''>全部</option>";  
    for(var i=0;i<data.length;i++){  
        str+="<option value='"+data[i].value+"'>"+data[i].valueName+"</option>"  
    }  
    $("#type").html(str);  
}  
function showGongdanType(category){  
jQuery.ajax({  
url : "${contextPath}/assets/statistic/ajaxGetType.do",  
data : {statCategory : category},  
type : "post",  
cache : false,  
dataType : "json",  
success:callback  
});  
}  
function callback(data){   
      document.all['type'].options.length = 0;  
    var str="<option value=''>全部</option>";  
    for(var i=0;i<data.length;i++){  
     str+="<option value='"+data[i].value+"'>"+data[i].valueName+"</option>"  
    }  
    $("#type").html(str);  
// 下面代码是为了第二级下拉列表的定位。因为非struts2的标签，无法自己定位  
    if("${gongdanType}"!=''){  
        for(var i=0;i<data.length;i++){  
            if(data[i].value=="${gongdanType}")  
            document.all['type'].selectedIndex=i+1;  
        }  
    }  
}  
</script>  
  
            <td width="10%" height="25" class="alignLeft">  
                统计类别：  
            </td>  
            <td width="10%" valign="top" class="alignLeft">  
                    <s:select name="form.category" list="categorys" id="category"  
                        listKey="value" listValue="valueName"   
                        onchange="onchangeShow(this.value)">  
                    </s:select>  
            </td>  
            <td width="10%" height="25" class="alignLeft">  
                工单类型：  
            </td>  
            <td width="10%" valign="top" class="alignLeft">  
             <select name="form.gongdanType" id="type" >  
            </select></td>  
<%@ page contentType="text/html; charset=UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="json2.js"></script><script type="text/javascript">jQuery(function($){ var obj=$("#category"); if(typeof obj != 'undefined' && obj !=''){ showGongdanType(obj.val());}}); function onchangeShow(category){jQuery.ajax({ url : "${contextPath}/assets/statistic/ajaxGetType.do", data : {statCategory : category}, // 传递参数 type : "post", cache : false, dataType : "json", success:onchangecallback});} function onchangecallback(data){ document.all['type'].options.length = 0; var str="<option value=''>全部</option>"; for(var i=0;i<data.length;i++){ str+="<option value='"+data[i].value+"'>"+data[i].valueName+"</option>"} $("#type").html(str);} function showGongdanType(category){jQuery.ajax({ url : "${contextPath}/assets/statistic/ajaxGetType.do", data : {statCategory : category}, type : "post", cache : false, dataType : "json", success:callback});} function callback(data){ document.all['type'].options.length = 0; var str="<option value=''>全部</option>"; for(var i=0;i<data.length;i++){ str+="<option value='"+data[i].value+"'>"+data[i].valueName+"</option>"} $("#type").html(str); // 下面代码是为了第二级下拉列表的定位。因为非struts2的标签，无法自己定位 if("${gongdanType}"!=''){ for(var i=0;i<data.length;i++){ if(data[i].value=="${gongdanType}") document.all['type'].selectedIndex=i+1;}}}</script><td width="10%" height="25" class="alignLeft">统计类别： </td><td width="10%" valign="top" class="alignLeft"><s:select name="form.category" list="categorys" id="category" listKey="value" listValue="valueName" onchange="onchangeShow(this.value)"></s:select></td><td width="10%" height="25" class="alignLeft">工单类型： </td><td width="10%" valign="top" class="alignLeft"><select name="form.gongdanType" id="type" ></select></td>


上面写了两个请求的函数，代码一样，只不过在第一级下拉列表onchange时，第二级下拉列表要定位在第一个值“全部”。


action

Java代码
public class GongdanTypeStatAction extends ActionSupport implements Preparable {  
      
    private String type;  
      
    private List<Param> categorys;  
      
    private List<Param> gongdanTypes;  
      
    private String statCategory;  
  
    public void prepare() throws Exception {  
        type = ServletActionContext.getRequest().getParameter("type");  
        categorys = new ArrayList<Param>();  
        Param param1 = new Param();  
        param1.setValue("CB");  
        param1.setValueName("业务变更");  
        Param param2 = new Param();  
        param2.setValue("APP");  
        param2.setValueName("资源申请");  
        categorys.add(param1);  
        categorys.add(param2);  
    }  
      
    // 得到业务变更和资源申请下的变更类别  
    public void ajaxGetType() throws Exception {  
        // 工单类型  
        if("CB".equals(statCategory)){  
            gongdanTypes = new ArrayList<Param>();  
            for(EChangeBusinessCategory ec:EChangeBusinessCategory.values()){  
                Param param = new Param();  
                param.setValue(ec.getKey());  
                param.setValueName(ec.getLable());  
                gongdanTypes.add(param);  
            }  
        }else if("APP".equals(statCategory)){  
            gongdanTypes = new ArrayList<Param>();  
            for (EApplyType et : EApplyType.values()) {  
                Param param = new Param();  
                param.setValue(et.getKey());  
                param.setValueName(et.getName());  
                gongdanTypes.add(param);  
            }  
        }  
        JSONArray jsonObj = JSONArray.fromObject(gongdanTypes);  
        sendMsg(jsonObj.toString());    //发送JSON格式的字符串回JS端      
    }  
      
    public void sendMsg(String content) throws IOException{      
        HttpServletResponse response = ServletActionContext.getResponse();      
        response.setCharacterEncoding("UTF-8");      
        response.getWriter().write(content);      
    }    
}  
public class GongdanTypeStatAction extends ActionSupport implements Preparable { private String type; private List<Param> categorys; private List<Param> gongdanTypes; private String statCategory; public void prepare() throws Exception { type = ServletActionContext.getRequest().getParameter("type"); categorys = new ArrayList<Param>(); Param param1 = new Param(); param1.setValue("CB"); param1.setValueName("业务变更"); Param param2 = new Param(); param2.setValue("APP"); param2.setValueName("资源申请"); categorys.add(param1); categorys.add(param2);} // 得到业务变更和资源申请下的变更类别 public void ajaxGetType() throws Exception { // 工单类型 if("CB".equals(statCategory)){ gongdanTypes = new ArrayList<Param>(); for(EChangeBusinessCategory ec:EChangeBusinessCategory.values()){ Param param = new Param(); param.setValue(ec.getKey()); param.setValueName(ec.getLable()); gongdanTypes.add(param);}}else if("APP".equals(statCategory)){ gongdanTypes = new ArrayList<Param>(); for (EApplyType et : EApplyType.values()) { Param param = new Param(); param.setValue(et.getKey()); param.setValueName(et.getName()); gongdanTypes.add(param);}} JSONArray jsonObj = JSONArray.fromObject(gongdanTypes); sendMsg(jsonObj.toString()); //发送JSON格式的字符串回JS端 } public void sendMsg(String content) throws IOException{ HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); response.getWriter().write(content); } }



Param.java

Java代码
  
public class Param {  
  
    private Object entity;  
  
      
    private String value;  
  
      
    private String valueName;  
  
    public Param() {  
  
    }  
  
      
    public Param(String value, String valueName) {  
        this.value = value;  
        this.valueName = valueName;  
    }  
  
      
    public String getValue() {  
        return value;  
    }  
  
      
    public void setValue(String value) {  
        this.value = value;  
    }  
  
      
    public String getValueName() {  
        return valueName;  
    }  
  
      
    public void setValueName(String valueName) {  
        this.valueName = valueName;  
    }  
  
      
    public Object getEntity() {  
        return entity;  
    }  
  
      
    public void setEntity(Object entity) {  
        this.entity = entity;  
    }  
  
}  
public class Param { private Object entity; private String value; private String valueName; public Param() {} public Param(String value, String valueName) { this.value = value; this.valueName = valueName;} public String getValue() { return value;} public void setValue(String value) { this.value = value;} public String getValueName() { return valueName;} public void setValueName(String valueName) { this.valueName = valueName;} public Object getEntity() { return entity;} public void setEntity(Object entity) { this.entity = entity;}}


两个枚举类型
EChangeBusinessCategory.java
EApplyType.java

Java代码
public enum EChangeBusinessCategory {  
  
    // 系统安装  
    SYSTEM_SETUP("SYS", "系统安装"),  
    // 监控需求  
    MONITOR_DEMAND("MONI", "监控需求"),  
    // 机柜需求  
    CABINETS_DEMAND("CABI", "机柜需求"),  
      
    // 撤销存储  
    STORAGE_DEMAND("STOR","撤销存储"),  
    // 网络需求  
    NETWORK_DEMAND("NET", "网络需求");  
  
    private String key;  
  
    private String lable;  
  
  
    EChangeBusinessCategory(String key, String value) {  
        this.key = key;  
        this.lable = value;  
    }  
  
      
    public static EChangeBusinessCategory getEnumType(String key) {  
        EChangeBusinessCategory[] values = EChangeBusinessCategory.values();  
        for (int i = 0; i < values.length; i++) {  
            EChangeBusinessCategory eInfo = values[i];  
            if (eInfo.getKey().equals(key)) {  
                return eInfo;  
            }  
        }  
        return null;  
    }  
  
      
    public String getLable() {  
        return lable;  
    }  
  
      
    public String getKey() {  
        return key;  
    }  
  
}  
  
  
public enum EApplyType {  
  
    SERV("SERV", "服务器"),  
  
    CABI("CABI", "机柜"),  
  
    IP("IP", "IP"),  
  
    STOR("STOR", "存储");  
  
    private String key;  
  
    private String name;  
  
      
    EApplyType(String key, String name) {  
        this.key = key;  
        this.name = name;  
    }  
  
      
    public String getKey() {  
        return key;  
    }  
  
      
    public String getName() {  
        return name;  
    }  
  
      
    public static EApplyType getEnumType(String key) {  
        EApplyType[] values = EApplyType.values();  
        for (int i = 0; i < values.length; i++) {  
            EApplyType eInfo = values[i];  
            if (eInfo.getKey().equals(key)) {  
                return eInfo;  
            }  
        }  
        return null;  
    }  
}  
public enum EChangeBusinessCategory { // 系统安装 SYSTEM_SETUP("SYS", "系统安装"), // 监控需求 MONITOR_DEMAND("MONI", "监控需求"), // 机柜需求 CABINETS_DEMAND("CABI", "机柜需求"), // 撤销存储 STORAGE_DEMAND("STOR","撤销存储"), // 网络需求 NETWORK_DEMAND("NET", "网络需求"); private String key; private String lable; EChangeBusinessCategory(String key, String value) { this.key = key; this.lable = value;} public static EChangeBusinessCategory getEnumType(String key) { EChangeBusinessCategory[] values = EChangeBusinessCategory.values(); for (int i = 0; i < values.length; i++) { EChangeBusinessCategory eInfo = values[i]; if (eInfo.getKey().equals(key)) { return eInfo;}} return null;} public String getLable() { return lable;} public String getKey() { return key;}} public enum EApplyType { SERV("SERV", "服务器"), CABI("CABI", "机柜"), IP("IP", "IP"), STOR("STOR", "存储"); private String key; private String name; EApplyType(String key, String name) { this.key = key; this.name = name;} public String getKey() { return key;} public String getName() { return name;} public static EApplyType getEnumType(String key) { EApplyType[] values = EApplyType.values(); for (int i = 0; i < values.length; i++) { EApplyType eInfo = values[i]; if (eInfo.getKey().equals(key)) { return eInfo;}} return null;}}



action配置

Java代码
<action name="ajaxGetType" class="GongdanTypeStatAction"   
    method="ajaxGetType">  
</action>  
<action name="ajaxGetType" class="GongdanTypeStatAction" method="ajaxGetType"></action>