1、后台从数据库中获取数据,传递到response中
这一步折腾了我一整天,不知道是因为没有传递到response中还是其他的原因,在前台获取的data,使用alert(data)输出的一直为空值或null
有两种方式可以实现这一步。一是利用注解@ResponseBody,二是利用PrintWriter。最终我是通过@ResponseBody成功完成了这一步,而不知道为什么利用PrintWriter总是写不成功,具体的原因我后面再研究研究吧。下面来介绍下这两种实现方式:
(1)@ResponseBody,即将方法返回值写到response对象中,代码如下:
[java] view plain copy
- <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);*/
- <strong>return jsonArray.toString();</strong>
- }</span>
这里我是利用net.sf.json.JSONArray;将从数据库读取的对象转换成了json格式。
说到这里,就要提下,要导入的jar包
要使程序可以运行必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包:
[html] view plain copy
- <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文件的配置如下:
[html] view plain copy
- <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实现如下:
[java] view plain copy
- <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,代码如下:
[html] view plain copy
- <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对象,获取对象的相关值
[html] view plain copy
- <span style="font-family:Comic Sans MS;">val=eval(data);//转换成js对象
- alert(val[2].name);这一行代码便可以获取对应的name值。</span>
感觉这三步写起来很简单,但是在实现过程中,我还是思考了很久的,主要是第一步的过程一直不行,导致第二步获得的值为空,这里总结下希望以后
不会再在这个地方卡住,通过这个过程,我也明白了SSM前台和后台交互的过程。
原文地址:https://www.cnblogs.com/tanzq/p/8372343.html