Ajax向前后台傳遞json和轉換

   

學生管理系統MVC模式設計心得：

 

jquery .ajax提交data數據格式

jquery 的Ajax方法提交數據，但是是多個參數，具體data的格式如下：

data提交的數據類型為：Object 或 String

data數據說明：發送到服務器的數據。如果不是字符串，將會被轉換為字符串。

GET請求將會被附加到URL后面。防止自動轉換。對象必須為key/value數據格式。

例如：{foo1:"bar1",foo2:"bar2"}轉換為 &foo1=bar1&foo2=bar2。

如果是數組，JQuery將自動為不同的值類型對應同一個名稱。

例如：{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

 

也就是在JQuery中ajax提交data的數據格式為：{x:"x1",x2:"x3"}這種方式，如果有參數傳入，格式如下：

data: {get_id: get_item_id,filter:"item"},

get_item_id是外部的參數。

 

 轉載自：黃兵個人博客 - jquery .ajax提交data數據格式

 

 

 

Ajax從后台返回前台的數據類型dataType參數：

•"xml": 返回 XML 文檔，可用 jQuery 處理
•"html": 返回純文本 HTML 信息；包含的 script 標簽會在插入 dom 時執行
•"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 “cache” 參數。
 注意：在遠程請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為將使用 DOM 的 script標簽來加載）
 •"json": 返回 JSON 數據
 •"jsonp": JSONP 格式。使用 JSONP 形式調用函數時,
 如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數
 •"text": 返回純文本字符串

 

json的傳遞：

將java的List類型返回前台時，先將List轉換為包含 json對象的JSONArray數組再傳回前端

需要的jar包：json-lib-2.4-jdk15.jar 及其依賴包

后台：

List<Student> student_list = new ArrayList<Student>(); 2 
JSONArray jsonArray2 = JSONArray.fromObject(student_list); 4 
//JSONArray: [{no:"123", name:"張三"}，{no:"124", name:"李四"}，{...},{...}]

PrintWriter printWriter = response.getWriter(); 8 printWriter.print(jsonArray2);

前台：

function MyAjax(url, send_data, successFun,beforeSendFun,isAsync) { if (isAsync == null) isAsync = true; $.ajax({ url : url, type : "POST", data : send_data, async : isAsync, dataType:'json', beforeSend : beforeSendFun, success : function(return_data) { successFun(return_data); }, error : function(XMLHttpRequest, textStatus, errorThrown) { alert("請求處理失敗"); } }); }

 

Ajax前台向后台傳遞對象：

將js對象或者json對象轉換為json字符串在Ajax傳遞，在后台中再將json字符串轉換為json對象，再轉換為java對象

var student={
    name:"abc",
    age:12,
    no:"123"
};

    console.log(student);
    //將js對象轉換為json字符串通過ajax傳遞，在后台中再將json字符串轉換為json對象再轉換為java對象

    student = JSON.stringify(student);

Ajax:

$.ajax({
        url : url,
        type : "POST",
        data : {
                sendData:"傳遞下面的json字符串",
                jsonStr: student
                },
        async : isAsync,
        dataType:data_type,
        beforeSend : beforeSendFun,
        success : function(return_data) {
            successFun(return_data);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("請求處理失敗");
        }
    });

后台解析：

String sendData = request.getParameter("sendData");

if (sendData.equals("傳遞下面json字符串")){

String jsonStr = request.getParameter("jsonStr");

JSONObject student_json= new JSONObject().fromObject(jsonStr);//將json字符串轉換為json對象

Student student = (Student)JSONObject.toBean(student_json,Student.class);//再將json對象轉換為Student對象

}

 

 

 

 

 

 

json格式轉換:

 

JS對象格式:

var obj = {  2 
      name: "餅干",  4 
      code: "PC-001",  6 
      price: 360,  8 
      getInfo: function () { 10 
              return this.name; 12 
 } 14 
    }    

json對象:

var obj = {

        name: "餅干",      
  
        code: "PC-001",      
  
        price: 360,      
  
        getInfo: function () {
 
               return this.name;
 
       }
 
     }    

json字符串格式：

jsonStr="{"a":"adc","b":123,"c":"哈哈"}"

 

 

json對象，js對象，json字符串，java對象之間的常用轉換：

 

str=JSON.stringify(obj); json對象轉換為json字符串

obj=JSON.parse(str); json字符串轉換為json對象

 

var obj={  2         a:"adc",  3         b:123,  4         c:"哈哈"    
 };  6     console.log(obj);//js對象
    
    obj=JSON.stringify(obj);//轉換為json字符串
 console.log(obj); 10  //obj="{"a":"adc","b":123,"c":"哈哈"}"    
    
    obj=JSON.parse(obj);//json字符串轉換為json對象
    console.log(obj);
       //{a: "adc", b: 123, c: "哈哈"}

一、JSON字符串轉化為JSON對象

假設我們有如下 JSON 字符串需要轉換為 JSON 對象。

 

 

var jsonStr = '[{"CityId":18,"CityName":"西安"},{"CityId":53,"CityName":"廣州"}]';

1，使用eval()函數進行轉換

• 使用 eval() 轉換時需要在 json 字符外包裹一對小括號。
• ie8(兼容模式)、ie7、ie6 不要使用此方法。

 

var jsonObj = eval('(' + jsonStr + ')');
alert(jsonObj[0]["CityName"]);

2，使用JSON.parse()方法進行轉換

var jsonObj = JSON.parse(jsonStr);

 

3，使用json2.js進行轉換

json2.js 提供了 json 的序列化和反序列化方法，完美支持各個瀏覽器。
使用時我們首先要將 json2.js 引用進來，源碼地址：https://github.com/douglascrockford/JSON-js

 

var jsonObj = JSON.parse(jsonStr);

4，使用jQuery進行轉換

如果我們項目中有使用 jQuery，那么直接使用 $.parseJSON() 方法即可，而且可以確保各個瀏覽器的兼容性。

 

var jsonObj = $.parseJSON(jsonStr);

 

 

二、JSON對象轉化為JSON字符串

假設我們有如下的對象：

 

 

var jsonObj = {
    "CityId":"18",
    "CityName":"西安2"
};

 

1，使用JSON.stringify()方法進行轉換

該方法不支持較老版本的IE瀏覽器，比如：ie8(兼容模式)、ie7、ie6。

 

運行結果如下：

var jsonStr = JSON.stringify(jsonObj);
alert(jsonStr);

2，使用json2.js進行轉換

下載使用 json2.js，具體地址參考前面內容。使用方式和上面一樣。

 

var jsonStr = JSON.stringify(jsonObj);

3，使用jQuery進行轉換

首先對 jQuery 進行擴展，增加個 json 對象轉字符串的方法。

jQuery.extend({
    stringify  : function stringify(obj) {
        var t = typeof (obj);
        if (t != "object" || obj === null) {
            // simple data type
            if (t == "string") obj = '"' + obj + '"';
            return String(obj);
        } else {
            // recurse array or object
            var n, v, json = [], arr = (obj && obj.constructor == Array);
 
            for (n in obj) {
                v = obj[n];
                t = typeof(v);
                if (obj.hasOwnProperty(n)) {
                    if (t == "string") v = '"' + v + '"';
                    else if (t == "object" && v !== null) v = jQuery.stringify(v);
                    json.push((arr ? "" : '"' + n + '":') + String(v));
                }
            }
            return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
        }
    }
});

 

使用方式如下：

 

var jsonStr = $.stringify(jsonObj);

 

 

 

 

 

java對象與json對象間的相互轉換

1.將json字符串轉換java對象

JSONObject jsonObj = new JSONObject().fromObject(jsonStr);//將json字符串轉換為json對象 2 
//將json對象轉換為java對象
Student student =(Student)JSONObject.toBean(jsonObj,Student.class);//將json對象轉換為Student對象

1.將java對象轉換json字符串

//先將java對象轉換為json對象，在將json對象轉換為json字符串
JSONObject json = JSONObject.fromObject(obj);//將java對象轉換為json對象

String str = json.toString();//將json對象轉換為字符串