springMVC框架下JQuery傳遞并解析Json數據

jopen 10年前發布 | 152K 次閱讀 Spring MVC Web框架 SpringMVC

json作為一種輕量級 的數據交換格式,在前后臺數據交換中占據著非常重要的地位。Json的語法非常簡單,采用的是鍵值對表示形式。JSON 可以將 JavaScript 對象中表示的一組數據轉換為字符串,然后就可以在函數之間輕松地傳遞這個字符串,或者在異步應用程序中將字符串從 Web 客戶機傳遞給服務器端程序,也可以從服務器端程序傳遞json格式的字符串給前端并由前端解釋。這個字符串是符合json語法的,而json語法又是 javascript語法的子集,所以javascript很容易解釋它,而且 JSON 可以表示比"名稱 / 值對"更復雜的結構。下面我們通過實例來看看JQuery傳遞/解析json格式的數據是如何實現的。

1.首先來看前端jsp代碼:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<script type="text/javascript" src="/springMVC6/js/jquery-1.7.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    $(document).ready(function(){  
        //傳遞字符串格式json對象到后臺(一個json對象)  
        $("#resolveJsonObject").click(function(){  
            var userName =encodeURI($("#userName").attr("value"));  
            var age = encodeURI($("#age").attr("value"));  

            var user = {userName:userName,age:age};  
            var aMenu  = encodeURI(JSON.stringify(user));  

            $.ajax({  
                 url:"/springMVC6/user/data/resolveJsonObject" ,  
                 data:"orderJson=" + aMenu,    
                 success:function(data){  

                }  
            });  
        });  

        //傳遞json數組到后臺  
        $("#resolveJsonArray").click(function(){  
            var userName =encodeURI($("#userName").attr("value"));  
            var age = encodeURI($("#age").attr("value"));  

            //數組開始  
            var user1 = {userName:userName,age:age};  
            var allMenu={  
                "menu":[ ]  
                };  
            allMenu.menu.push(user1);   
            var allMenu1 = encodeURI(JSON.stringify(allMenu));  

            $.ajax({  
                //json數組  
                 url:"/springMVC6/user/data/resolveJsonArray" ,  
                data:"orderJson=" + allMenu1,   
                success:function(data){  

                }  
            });  
        });  

        //接收后臺的json在前臺解析  
        $("#resolveJson").click(function(){  

            $.ajax({  
                //解析從后臺返回的json數據  
                url:"/springMVC6/user/data/resolveJson" ,  
                type:"post",          
                success:function(data){  
                    var arr=eval(data);  
                    alert(arr.length);  
                    for(var m = 0;m<arr.length;m++){  
                        alert(arr[m].user.userName);  
                    }  
                }  
            });  
        });  
    });  

</script>  
</head>  
<body>  
    <h1>json添加用戶</h1>   

    姓名:<input id="userName" type="text" name="userName">  
    年齡:<input id="age" type="text" name="age"><br>  
    <input type="button" id="resolveJsonObject" value="json對象">  
    <input type="button" id="resolveJsonArray" value="json數組">  
    <input type="button" id="resolveJson" value="前端解析json字符串">  
</body>  
</html>  </pre><a href="/misc/goto?guid=4959553325151740234" target="_blank" title="派生到我的代碼片" style="text-indent:0;"></a></div>

</div> </div>

2.使用javabean解析前端數據:

    package com.tgb.web.controller.annotation;

import java.io.IOException;  
import java.net.URLDecoder;  
import java.util.ArrayList;   
import java.util.List;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
import net.sf.json.JSONArray;  
import net.sf.json.JSONObject;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestMapping;  
import com.tgb.web.controller.entity.User;  

@Controller  
@RequestMapping("/user/data")  
public class DataController {  

    //接收前臺傳過來的字符串格式的json對象,在后臺進行解析  
    @RequestMapping("/resolveJsonObject"    )  
    public void resolveJsonObject(HttpServletRequest request,HttpServletResponse response) throws IOException {  
        //解碼  
        String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8");  
        JSONObject jb=new JSONObject();   
        //將json格式的字符串轉換為json對象,并取得該對象的“userName”屬性值  
        String o=(String)jb.fromObject(str).get("userName");  
        System.out.println(o);  
    }   

     //傳遞json數組字符串  
    @RequestMapping("/resolveJsonArray" )  
    public void resolveJsonArray(HttpServletRequest request,HttpServletResponse response) throws IOException {  
        //解碼,為了解決中文亂碼  
        String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8");  
        JSONObject jb=new JSONObject();  
        //將json格式的字符串轉換為json數組對象  
        JSONArray array=(JSONArray)jb.fromObject(str).get("menu");  
        //取得json數組中的第一個對象  
        JSONObject o = (JSONObject) array.get(0);//獲得第一個array結果  
        //取出json數組中第一個對象的“userName”屬性值  
        String name=o.get("userName").toString();//獲得屬性值  
        System.out.println(name);  
    }   

    //通過該函數返回json格式的數據,在前臺通過JQuery進行解析  
    @RequestMapping("/resolveJson"  )  
    public void resolveJson(HttpServletRequest request,HttpServletResponse response) throws IOException {  

        List m = (List) new  ArrayList();  
        JSONArray jsons = new JSONArray();  
        for(int i=0;i<10;i++){  
            User user = new User();  
            user.setUserName("name_" + i);  
            m.add(user);  
        }  

        for(int j=0;j<m.size();j++){  
            JSONObject jsonObject = new JSONObject();  
            jsonObject.put("user", m.get(j));  
            jsons.add(jsonObject);  
        }  
        response.getWriter().print(jsons.toString()) ;   
    }   

    @RequestMapping("/toJson"   )   
    public String toJson() {  
        return "/json";  
    }  
}  </pre><a href="/misc/goto?guid=4959553325151740234" target="_blank" title="派生到我的代碼片" style="text-indent:0;"></a></div>

</div> </div>
json的作用并不僅僅 在于作為字符串在前后臺進行傳遞,我們采用json傳遞數據的時候更主要的考慮到的是它的傳輸效率。當兩個系統需要進行數據交換的時候,如果傳遞的是經過 序列化的對象,效率是非常低的,如果傳遞的是存儲大量對象的數組的時候效率就更不敢想象了,這時如果通過將對象或數據轉換成json字符串進行傳遞,效率 就會提高很多。本文僅針對單系統中前后臺數據傳輸與解析進行講解,異構系統之間的json傳輸不在本文討論范圍內

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!