SSM將后台獲取的數據轉換成json格式傳遞到前台頁面

1、后台從數據庫中獲取數據，傳遞到response中

這一步折騰了我一整天，不知道是因為沒有傳遞到response中還是其他的原因，在前台獲取的data，使用alert(data)輸出的一直為空值或null
有兩種方式可以實現這一步。一是利用注解@ResponseBody,二是利用PrintWriter。最終我是通過@ResponseBody成功完成了這一步，而不知道為什么利用PrintWriter總是寫不成功，具體的原因我后面再研究研究吧。下面來介紹下這兩種實現方式：

（1）@ResponseBody，即將方法返回值寫到response對象中，代碼如下：

 

<span style="font-family:Comic Sans MS;">        @RequestMapping("/addAction.do")
    <strong>@ResponseBody//將返回結果寫到response中</strong>
    public String save(HttpServletRequest request,HttpServletResponse response,Model model,@RequestParam(value="photo",required=false)MultipartFile filedata) throws IllegalArgumentException, IllegalAccessException{
         //PrintWriter out=null;
        if(filedata!=null&&!filedata.isEmpty()){
            //獲取圖片的文件名
            String fileName=filedata.getOriginalFilename();
            //獲取圖片的擴展名
            String extensionName=fileName.substring(fileName.lastIndexOf(".")+1);
            //新的圖片名=獲取時間戳+"."圖片擴展名
            String newFileName=String.valueOf(System.currentTimeMillis())+"."+extensionName;
            System.out.println(picUrl);
            //將圖片上傳到服務器
            //saveFile(newFileName,filedata);
            saveFile(fileName,filedata);
            //將圖片名稱保存至數據庫
             //photoService.insert(fileName);
        }


        JSONArray jsonArray=new JSONArray();
        for(int i=10;i<30;i++){
            Photo p=photoService.getPhotoById(new BigDecimal(i));
            jsonArray.add(p);
        }

        //獲取單個json對象
        /*JSONObject json=null;
        Photo p1=photoService.getPhotoById(new BigDecimal(3));
        json=JSONObject.fromObject(p1);*/
        return jsonArray.toString();
    }

這里我是利用net.sf.json.JSONArray;將從數據庫讀取的對象轉換成了json格式。
說到這里，就要提下，要導入的jar包
要使程序可以運行必須引入JSON-lib包，JSON-lib包同時依賴於以下的JAR包：

 

<span style="font-family:Comic Sans MS;">commons-lang.jar
commons-beanutils.jar
commons-collections.jar
commons-logging.jar
ezmorph.jar
json-lib-2.2.2-jdk15.jar</span>

這幾個jar包缺一不可，不然會報錯。
我的maven中pom.xml文件的配置如下：

 

<span style="font-family:Comic Sans MS;">                <!-- json依賴的jar包 -->
        <dependency>
        <groupId>net.sf.json</groupId>
        <artifactId>json-lib</artifactId>
        <version>2.2.2</version>
        </dependency>

        <dependency>
        <groupId>commons-beanutils</groupId>
        <artifactId>common-beanu</artifactId>
        <version>1.0</version>
        </dependency>

        <dependency>
        <groupId>commons-collections</groupId>
        <artifactId>commons-collections</artifactId>
        <version>3.2.1</version>
        </dependency>

        <dependency>
        <groupId>commons-logging</groupId>
        <artifactId>commons-logging</artifactId>
        <version>1.1.1</version>
        </dependency>

        <dependency>
        <groupId>commons-lang</groupId>
        <artifactId>commons-lang</artifactId>
        <version>2.1</version>
        </dependency>

        <dependency>
        <groupId>ezmorph</groupId>
        <artifactId>ezmorph</artifactId>
        <version>1.0.6</version>
        </dependency></span>

(2) 利用PrintWriter實現如下：

 

<span style="font-family:Comic Sans MS;">                 response.setCharacterEncoding("UTF-8");
         response.setHeader("Cache-Control", "no-cache");
         response.setContentType("application/json");
         PrintWriter out=null;
         try {
            out=response.getWriter();
            out.print(json.toString());
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }</span>

 

2、前台獲取獲取后台傳遞的json數據，利用jquery的ajax,代碼如下：

 

<span style="font-family:Comic Sans MS;">        function photo(){
    var val;
    $.ajax({
        async:false,
        type:'get',//get是獲取數據，post是帶數據的向服務器發送請求
        url:'addAction.do',
        dataType:'json',
        success:function(data){
            val=eval(data);//轉換成js對象
            alert(val[2].name);
            alert(data);
        },
        error:function(data){
            alert("JSON數據獲取失敗，請聯系管理員！");
        }
    });
}</span>

主要是把ajax的相關參數弄明白，上述獲取數據的過程也就清楚了。

3、將json字符串解析為js對象，獲取對象的相關值

 

<span style="font-family:Comic Sans MS;">val=eval(data);//轉換成js對象
alert(val[2].name);這一行代碼便可以獲取對應的name值。</span>

感覺這三步寫起來很簡單，但是在實現過程中，我還是思考了很久的，主要是第一步的過程一直不行，導致第二步獲得的值為空，這里總結下希望以后
不會再在這個地方卡住，通過這個過程，我也明白了SSM前台和后台交互的過程。