jquery下的json格式ajax實(shí)現(xiàn)

前言

    ajax大大地方便了前臺(tái)頁(yè)面的顯示，提升了用戶體驗(yàn)，提高了資源的利用率。而jquery支持的ajax方法又為ajax的實(shí)現(xiàn)提供了封裝，免去了繁瑣的瀏覽器兼容判斷與response返回?cái)?shù)據(jù)狀態(tài)判斷。

    jquery的ajax支持String、XML和JSON機(jī)種格式，而隨著現(xiàn)在類(lèi)庫(kù)的不斷完善，現(xiàn)在可以很方便的直接將對(duì)象直接轉(zhuǎn)換成JSON的數(shù)據(jù)格式，返回給前臺(tái)。而前臺(tái)JS也可以將JSON數(shù)據(jù)很方便地再轉(zhuǎn)換成對(duì)象。

    相對(duì)于XML，JSON這種數(shù)據(jù)格式可能直接看上去沒(méi)有XML那么清晰，但是其更利于對(duì)其的解析，直接eval即可獲取其對(duì)象，利于編程。

一、實(shí)例 

實(shí)例才是王道，需求如下:

輸入整機(jī)條碼信息，后臺(tái)查詢相關(guān)數(shù)據(jù)（工單號(hào)碼、機(jī)種、工單數(shù)量）并將其自動(dòng)顯示到頁(yè)面

采用jquery觸發(fā)整機(jī)條碼的change事件，觸發(fā)時(shí)走如下ajax方法

$.ajax({  
    //采用post方式傳遞數(shù)據(jù)
    type: "POST",  
    //struts的action請(qǐng)求
    url: "repairinfo!queryorder",
    //傳遞到后臺(tái)的數(shù)據(jù)  
    data:   "machinecode="+$("#machinecode").val(),  
    //采用json的方式返回?cái)?shù)據(jù)
    dataType:"json",  
    //后臺(tái)返回?cái)?shù)據(jù)后的方法，返回?cái)?shù)據(jù)為result
    success: function(result){           
//通過(guò)eval方法后臺(tái)組織的json數(shù)據(jù)可以直接轉(zhuǎn)化為對(duì)象
        var ary = eval(result);  
          
        //獲取數(shù)據(jù)時(shí)直接在引號(hào)內(nèi)填寫(xiě)字段名稱(chēng)即可
        $("#machinecode").val(ary['machinecode']);  
        $("#orderid").val(ary['orderid']);  
        $("#machine").val(ary['machine']);  
        $("#num").val(ary['num']);  
          
        if(ary['machinecode'] == null || ary['machinecode'] == ""){  
            $("#isflowid").html("此整機(jī)條碼不存在！");  
        }else{  
            $("#isflowid").empty();  
        }  
    }  
}); 

后臺(tái)獲取數(shù)據(jù)轉(zhuǎn)換為json形式返回前臺(tái)

public void queryorder() throws Exception{  
    /** 此處省略如何獲取實(shí)體repairinforshow */     
 
    //將實(shí)體轉(zhuǎn)化為json形式 
    JSONObject json = JSONObject.fromObject(repairinforshow);  
       System.out.println("開(kāi)始組織repairin"+json.toString());  
             
    //運(yùn)用response返回?cái)?shù)據(jù)
    HttpServletResponse response2 = ServletActionContext.getResponse();  
    response2.setCharacterEncoding("UTF-8");  
    response2.setContentType("text/html;charset=utf-8");  
    response2.setHeader("Cache-Control", "no-cache");  
    response2.getWriter().write(json.toString());  
} 

下面是后臺(tái)控制臺(tái)打印出來(lái)的json.toString()

開(kāi)始組織repairin{"count":"","description":"","errorcode":"","flag":"","id":0,"isreplacekey":"","machine":"I5","machinecode":"L36832-1C37066630","mainboardcode":"","mainboardreason":"","mainboardrepair":"","mainboardrepairman":"","mainboardresult":"","mainboardresultremark":"","num":"123","orderid":"12","reason":"","repair":"","repairman":"","repairtime":null,"result":"","resultremark":"","station":"","testman":"","uploadtime":null}  

二、幾個(gè)注意點(diǎn)

1、在后臺(tái)代碼中轉(zhuǎn)化為JSON的方法

如果是要傳遞collection，需要采用JSONArray來(lái)轉(zhuǎn)化

JSONArray json = JSONArray.fromObject(testsets); 

轉(zhuǎn)化為json的ArrayList

開(kāi)始組織testsets[{"id":1,"machineid":"6","remark":"前測(cè)","testtype":"前測(cè)"},{"id":2,"machineid":"6","remark":"老化","testtype":"老化"},{"id":3,"machineid":"6","remark":"后測(cè)","testtype":"后測(cè)"}]  

2、后臺(tái)轉(zhuǎn)換JSON數(shù)據(jù)用到的jar包

xom-1.1.jar                             json-lib-2.4.jar
ezmorph-1.0.6.jar                   commons-logging-1.1.1.jar
commons-lang-2.5.jar             commons-collections-3.2.1.jar
commons-beanutils-1.8.0.jar

如果是采用maven管理，只要早pom.xml中添加如下代碼即可

<dependency> 
    <groupId>net.sf.json-lib</groupId> 
    <artifactId>json-lib</artifactId> 
</dependency>