前言

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

老城網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),老城網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為老城上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的老城做網(wǎng)站的公司定做！

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

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

一、實(shí)例 

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

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

采用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){  
//通過eval方法后臺(tái)組織的json數(shù)據(jù)可以直接轉(zhuǎn)化為對(duì)象
        var ary = eval(result);  
          
//獲取數(shù)據(jù)時(shí)直接在引號(hào)內(nèi)填寫字段名稱即可
        $("#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("開始組織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)打印出來的json.toString()

開始組織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來轉(zhuǎn)化

JSONArray json = JSONArray.fromObject(testsets); 

轉(zhuǎn)化為json的ArrayList

開始組織testsets[{"id":1,"machineid":"6","remark":"前測","testtype":"前測"},{"id":2,"machineid":"6","remark":"老化","testtype":"老化"},{"id":3,"machineid":"6","remark":"后測","testtype":"后測"}]  

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中添加如下代碼即可

 
    net.sf.json-lib 
    json-lib