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

怼烎@ 2022-08-06 14:06 193阅读 0赞

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

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

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

@RequestMapping("/addAction.do")
 	@ResponseBody//将返回结果写到response中
 	public String save(HttpServletRequest request,HttpServletResponse response,Model model,@RequestParam(value="photo",required=false)MultipartFile fi ledata) 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包：

commons-lang.jar
 commons-beanutils.jar
 commons-collections.jar
 commons-logging.jar 
 ezmorph.jar
 json-lib-2.2.2-jdk15.jar

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

<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>

(2) 利用PrintWriter实现如下：

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();
 		}

但是这样一直不成功，具体的原因我还不是很清楚。

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

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

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

val=eval(data);//转换成js对象
 alert(val[2].name);这一行代码便可以获取对应的name值。

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