结合SSH1，JQuery的ajax返回json数据的处理过程



做了几天了，终于也算做得出一个JQuery的ajax例子了；用SSH1做的需要配置一些东西，也算得比较麻烦了

首先说明我ajax里response返回的数据是一个二维数组，比如这样的[{key,val},{key,val},{key,val}]，这个就是传说中的json数据了，至于怎么样，详情请仔细查看以下内容

以一个级联下拉框为例，第一个下拉框是加载页面时读取数据进来的，这个就不用管了；第二个下拉框是根据第一个下拉内容而改变；最后我在第二个下拉框后面还加了一个DIV，点击这个DIV把查看第二个下拉对象对应的内容显示出来

================================================================================================

JSP代码 ：

<%

String date = request.getAttribute("date")==null?"":request.getAttribute("date").toString();
response.setContentType("text/html;charset=GBK");
response.getWriter().print(date);

%>

<link type="text/css" href="JQuery/getDate.css" rel="stylesheet">
<script type="text/javascript" src="JQuery/jquery.js"></script>
<script type="text/javascript" src="JQuery/getDate.js"></script>

第一下拉框：
                    <select id="yearnum" >
                    <option selected="selected"></option>
                        <logic:iterate id="yearnumber" name="yearList" >
                            <option value="${yearnumber }">${yearnumber }</option>
                        </logic:iterate>
                    </select>
                &nbsp;&nbsp;
  第二下拉框:
                    <select id="nianji" style="width: 50px;">                                    
                    </select>                             
                <div id="contentclass" style="display: none;" > &nbsp;查看详情>></div>

---------------------------------------------------------------------------------------------------------------------------------------------------------

CSS样式表：

.cursor_pointer{
    cursor:pointer;     
}
.contentclass{            
        font-size: 12px;
        color: green;         
         float:right;
         display:inline;         
         cursor:pointer;                    
    }

---------------------------------------------------------------------------------------------------------------------------------------------------------

web.xml配置文件：(配置在</listener>后面)

<filter>
    <filter-name>hibernateFilter</filter-name>
    <filter-class>org.springframework.orm.hibernate3.support.OpenSessionInViewFilter</filter-class>
    <init-param>
    <param-name>singleSession</param-name>
    <param-value>false</param-value>
    </init-param>
    <!--这个<init-param>一定要加不然很可能会报错： org.springframework.dao.InvalidDataAccessApiUsageException:Write operations are not allowed in read-only mode (FlushMode.NEVER) - turn your Session into FlushMode.AUTO or remove 'readOnly' marker from transaction definition-->
 </filter>
<filter-mapping>
    <filter-name>hibernateFilter</filter-name>
    <url-pattern>*.mmg</url-pattern>
</filter-mapping>

---------------------------------------------------------------------------------------------------------------------------------------------------------

hibernate映射文件：

hibernate应用到级联时所需要配置主键和外键（一对多和多对一），注意name属性，因为在.do的JsonConfig配置时应用到

 <set name="stuinfos" lazy="false" cascade="all" inverse="true">
            <key>
                <column name="cid" not-null="true"/>
            </key>
            <one-to-many class="com.aptech.stu.entity.Stuinfo" />
        </set>

---------------------------------------

<many-to-one name="classes" class="com.aptech.stu.entity.Classes" fetch="select">
            <column name="cid" not-null="true" />
        </many-to-one>

---------------------------------------------------------------------------------------------------------------------------------------------------------

sturts1.x里的.do方法：

public ActionForward doGetStuinfoList(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) throws IOException{
        response.setContentType("text/html;charset=gbk");
        request.setCharacterEncoding("gbk");

        JsonConfig config = new JsonConfig();        
        config.setJsonPropertyFilter(new PropertyFilter() {            
            public boolean apply(Object source, String str, Object value) {
                if(str.equals("classes")||str.equals("stuinfos")){   //    classes和stuinfos来自映射文的name名字            
                    return true;
                }else{
                    return false;
                }                
            }
        });    
        int yn = Integer.parseInt( request.getParameter("yn"));        
        List<Classes> list = classesBiz.get(yn);
        
        String jsonArray = JSONArray.fromObject(list,config).toString();//返回数组作为json储存起来
        request.setAttribute("date", jsonArray);
        response.getWriter().print(jsonArray);
    
        return null;//这里必须返回空，如果不是在ajax里alert(date)会返回整个页面；我们要的是返回整个date数组        
    }

---------------------------------------------------------------------------------------------------------------------------------------------------------

ajax 的JS文件内容：(这里只做date返回数据说明，最后面有完整版的)

$("#yearnum").change(function(){
            var yn =this.options[this.selectedIndex].value;
            $("#nianji").empty();
            $.ajax({
                url:'http://localhost:8080/stuJQ/classes.do?op=doGetStuinfoList&yn='+yn,
                type:'post',
                dateType:'json',                        
                success:function(date){
                    var d  = eval(date);
                    $.each(d, function(i, ob){
                         $.each(ob,function(k,val){                            
                            if(k=='cname'){                                                                
                                $("#nianji").append("<option value='"+ob.cname.trim()+"'>"+ob.cname.trim()+"</option>");                                                                      }                            
                        });
                    });
                }                
            });

---------------------------------------------------------------------------------------------------------------------------------------------------------

ajax 的JS文件内容(详细)：

//第一个下拉改变时执行    
        $("#yearnum").change(function(){
            var yn =this.options[this.selectedIndex].value;//获取第一个下拉内容值    
            $("#nianji").empty();//清空第二个下拉里面内容
            $("#contentclass").html($("<div>详细内容>></div>"));//创建一个DIV内容显示到id=contentclass的DIV里面
            $.ajax({
                url:'http://localhost:8080/stuJQ/classes.do?op=doGetStuinfoList&yn='+yn,
                type:'post',
                dateType:'json',                        
                success:function(date){
                    //response返回来的数据（一般都 是以字符串格式返回），eval(date)是该字符串转换成json格式（json是以key:value）这样的存在的
                    var d  = eval(date);
                    /*d表示二维数组里的某一个对像 ,二维数组格式：[{key,val},{key,val},{key,val}]（key为键；val表示值,指某一个对象，该对象有很多的属性）
                    i表示key,数组里第几个对象；ob表示对象*/
                    $.each(d, function(i, ob){
                        //k表示val的属性名，val表示该属性对应的值
                         $.each(ob,function(k,val){                            
                            if(k=='cname'){                                                                
                                $("#nianji").append("<option value='"+ob.cname.trim()+"'>"+ob.cname.trim()+"</option>");                                                            
                            }                            
                        });
                        
                         $("#contentclass").click(function(){
                            //获取第二个下拉所选项的下标,以下d[nianjiID]是根据获对第二个下拉索引的对应的对象
                            var nianjiID = $("#nianji").get(i).selectedIndex;
                            alert("|"+nianjiID+"|")
                            
                                //判断如果第二个选项内容等于处理后的该对象的cname值
                                if($("#nianji").get(i).options[i].text == ob.cname.trim()){
                                    $("#contentclass").addClass("contentclass").html(
                                            "详细内容:<br/>"+
                                            "年度："+d[nianjiID].yearnumber+";    班级："+d[nianjiID].cname+";    班主任："+d[nianjiID].teacher+";    班长："+
                                            d[nianjiID].monitor+";    班费："+d[nianjiID].expense+";    地点："+d[nianjiID].address
                                            );
                                }                                                                                                                                                                                
                        });
                    });
                }                
            });
            if($("#yearnum").val().length != 0){//如果第一个下拉内空不为空，则显示DIV                
                $("#contentclass").addClass("contentclass").show(200);                
            }
            else{
                $("#contentclass").hide(200);
            }
        });
        
        $("#nianji").change(function(){//如果第二下拉内容改变，则改变DIV为原样
            $("#contentclass").html($("<div>详细内容>></div>"));
            
        });

================================================================================================

以上内容都 是在Firefox里操作，IE方面似乎还存在一点点问题，比如trim()函数在IE里没效果，提示不支持引方法或属性。

争取不出两天把这问题解决并把发现浏览器问题也做记录起来吧！！！