SSM将后台获取的数据转换成json格式传递到前台页面

1、后台从数据库中获取数据，传递到response中

这一步折腾了我一整天，不知道是因为没有传递到response中还是其他的原因，在前台获取的data，使用alert(data)输出的一直为空值或null
有两种方式可以实现这一步。一是利用注解@ResponseBody,二是利用PrintWriter。最终我是通过@ResponseBody成功完成了这一步，而不知道为什么利用PrintWriter总是写不成功，具体的原因我后面再研究研究吧。下面来介绍下这两种实现方式：

（1）@ResponseBody，即将方法返回值写到response对象中，代码如下：

[java] view plain copy
 
  1. <span style="font-family:Comic Sans MS;">        @RequestMapping("/addAction.do")  
  2.     <strong>@ResponseBody//将返回结果写到response中</strong>  
  3.     public String save(HttpServletRequest request,HttpServletResponse response,Model model,@RequestParam(value="photo",required=false)MultipartFile filedata) throws IllegalArgumentException, IllegalAccessException{  
  4.          //PrintWriter out=null;  
  5.         if(filedata!=null&&!filedata.isEmpty()){  
  6.             //获取图片的文件名  
  7.             String fileName=filedata.getOriginalFilename();  
  8.             //获取图片的扩展名  
  9.             String extensionName=fileName.substring(fileName.lastIndexOf(".")+1);  
  10.             //新的图片名=获取时间戳+"."图片扩展名  
  11.             String newFileName=String.valueOf(System.currentTimeMillis())+"."+extensionName;  
  12.             System.out.println(picUrl);  
  13.             //将图片上传到服务器  
  14.             //saveFile(newFileName,filedata);  
  15.             saveFile(fileName,filedata);  
  16.             //将图片名称保存至数据库  
  17.              //photoService.insert(fileName);  
  18.         }  
  19.   
  20.           
  21.         JSONArray jsonArray=new JSONArray();  
  22.         for(int i=10;i<30;i++){  
  23.             Photo p=photoService.getPhotoById(new BigDecimal(i));  
  24.             jsonArray.add(p);  
  25.         }  
  26.           
  27.         //获取单个json对象  
  28.         /*JSONObject json=null; 
  29.         Photo p1=photoService.getPhotoById(new BigDecimal(3)); 
  30.         json=JSONObject.fromObject(p1);*/  
  31.         return jsonArray.toString(); 
  32.     }
 


这里我是利用net.sf.json.JSONArray;将从数据库读取的对象转换成了json格式。
说到这里，就要提下，要导入的jar包
要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;">commons-lang.jar  
  2. commons-beanutils.jar  
  3. commons-collections.jar  
  4. commons-logging.jar   
  5. ezmorph.jar  
  6. json-lib-2.2.2-jdk15.jar</span>  


这几个jar包缺一不可，不然会报错。
我的maven中pom.xml文件的配置如下：

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;">                <!-- json依赖的jar包 -->  
  2.         <dependency>  
  3.         <groupId>net.sf.json</groupId>  
  4.         <artifactId>json-lib</artifactId>  
  5.         <version>2.2.2</version>  
  6.         </dependency>  
  7.           
  8.         <dependency>  
  9.         <groupId>commons-beanutils</groupId>  
  10.         <artifactId>common-beanu</artifactId>  
  11.         <version>1.0</version>  
  12.         </dependency>  
  13.           
  14.         <dependency>  
  15.         <groupId>commons-collections</groupId>  
  16.         <artifactId>commons-collections</artifactId>  
  17.         <version>3.2.1</version>  
  18.         </dependency>  
  19.           
  20.         <dependency>  
  21.         <groupId>commons-logging</groupId>  
  22.         <artifactId>commons-logging</artifactId>  
  23.         <version>1.1.1</version>  
  24.         </dependency>  
  25.           
  26.         <dependency>  
  27.         <groupId>commons-lang</groupId>  
  28.         <artifactId>commons-lang</artifactId>  
  29.         <version>2.1</version>  
  30.         </dependency>  
  31.           
  32.         <dependency>  
  33.         <groupId>ezmorph</groupId>  
  34.         <artifactId>ezmorph</artifactId>  
  35.         <version>1.0.6</version>  
  36.         </dependency></span>  


(2) 利用PrintWriter实现如下：

[java] view plain copy
 
  1. <span style="font-family:Comic Sans MS;">                 response.setCharacterEncoding("UTF-8");  
  2.          response.setHeader("Cache-Control", "no-cache");    
  3.          response.setContentType("application/json");  
  4.          PrintWriter out=null;  
  5.          try {  
  6.             out=response.getWriter();  
  7.             out.print(json.toString());  
  8.             out.flush();  
  9.             out.close();  
  10.         } catch (IOException e) {  
  11.             e.printStackTrace();  
  12.         }</span>  

2、前台获取获取后台传递的json数据，利用jquery的ajax,代码如下：

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;">        function photo(){  
  2.     var val;  
  3.     $.ajax({  
  4.         async:false,  
  5.         type:'get',//get是获取数据，post是带数据的向服务器发送请求  
  6.         url:'addAction.do',  
  7.         dataType:'json',  
  8.         success:function(data){  
  9.             val=eval(data);//转换成js对象  
  10.             alert(val[2].name);  
  11.             alert(data);  
  12.         },  
  13.         error:function(data){  
  14.             alert("JSON数据获取失败，请联系管理员！");  
  15.         }  
  16.     });  
  17. }</span>  


主要是把ajax的相关参数弄明白，上述获取数据的过程也就清楚了。

3、将json字符串解析为js对象，获取对象的相关值

[html] view plain copy
 
  1. <span style="font-family:Comic Sans MS;">val=eval(data);//转换成js对象  
  2. alert(val[2].name);这一行代码便可以获取对应的name值。</span>  


感觉这三步写起来很简单，但是在实现过程中，我还是思考了很久的，主要是第一步的过程一直不行，导致第二步获得的值为空，这里总结下希望以后
不会再在这个地方卡住，通过这个过程，我也明白了SSM前台和后台交互的过程。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/tanzq/p/8372343.html