SSM中通过Json做前后端分离

喜欢ヅ旅行 2023-10-18 13:02 13阅读 0赞

## 场景 ##

前面项目已经搭建到SSM中进行注解式和XML配置式事务管理阶段

参照：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/85165504][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_85165504]

在此项目基础上搭建使用json进行前后端交互

## 实现 ##

### 项目配置 ###

1.引入bootstrap以及jquery

参照:

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/85037589][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_85037589]

2.配置json中文问题

打开SpringMVC.xml

原来：

<mvc:annotation-driven />

改为：

<mvc:annotation-driven >
        <mvc:message-converters register-defaults="true">
           <bean class="org.springframework.http.converter.StringHttpMessageConverter">
              <property name= "supportedMediaTypes"value="text/plain;charset=UTF-8" />
           </bean>
        </mvc:message-converters>    
    </mvc:annotation-driven>

SpringMVC.xml完整代码

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
        xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
        xmlns:context="http://www.springframework.org/schema/context"
        xmlns:mvc="http://www.springframework.org/schema/mvc"
        xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd
            http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
            http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
            http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
            http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">
    
    
    
        <context:annotation-config/>
    
        <context:component-scan base-package="com.badao.controller">
              <context:include-filter type="annotation"
              expression="org.springframework.stereotype.Controller"/>
        </context:component-scan>
    
        
        <mvc:annotation-driven >
        <mvc:message-converters register-defaults="true">
           <bean class="org.springframework.http.converter.StringHttpMessageConverter">
              <property name= "supportedMediaTypes"value="text/plain;charset=UTF-8" />
           </bean>
        </mvc:message-converters>   
        </mvc:annotation-driven>
       
        <mvc:default-servlet-handler />
    
    
        <bean
            class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="viewClass"
                value="org.springframework.web.servlet.view.JstlView" />
            <property name="prefix" value="/WEB-INF/jsp/" />
            <property name="suffix" value=".jsp" />
        </bean>
    </beans>

### 前端提交后端接受 ###

在WebContent目录下的jsp目录下新建submit.jsp

#### submit.jsp ####

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
     
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    
    <%
     pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>用AJAX以JSON方式提交数据</title>  
    </head>  
    <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
    <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <body>  
       
        <form >
    	  <div class="form-group">
    	    <label for="name">用户名</label>
    	    <input type="text" class="form-control" id="name" name ="name" placeholder="name">
    	  </div>
    	  <div class="form-group">
    	    <label for="age">年龄</label>
    	    <input type="number" class="form-control" id="age"  name="age" placeholder="age">
    	  </div>
    	  <button type="submit" class="btn btn-default" id="sender">提交</button>
    	</form>
        <div id="messageDiv"></div>  
           
        <script>  
        $('#sender').click(function(){  
        	var name=document.getElementById('name').value;  
            var age=document.getElementById('age').value;  
            var user={"name":name,"age":age};  
            var jsonData = JSON.stringify(user);
            var page="submitUser";  
            
            $.ajax({
            	   type:"post",
            	   url: page,
            	   data:jsonData,
                   dataType:"json",
                   contentType : "application/json;charset=UTF-8",
            	   success: function(result){
            	   }
            	});
    		   alert("提交成功，请在Tomcat控制台查看服务端接收到的数据");
    
        });
        </script>  
    </body>  
       
    </body>
    </html>

#### 后台Controller ####

在userController下新建

@ResponseBody
      @RequestMapping("/submitUser")
      public String submitUser(@RequestBody User user) {
             System.out.println("SSM接受到浏览器提交的json，并转换为User对象:"+user);
             return "ok";
         }

用于接收json数据

再在UserController下新建

@RequestMapping("testJson")
     public ModelAndView testJson(){
      ModelAndView mav = new ModelAndView();
      // 放入jsp路径
      mav.setViewName("submit");
      return mav;
     }

用于页面跳转

#### 部署运行 ####

将项目部署到服务器，启动服务器输入：

[http://localhost:8080/ssmJarTemplate/testJson][http_localhost_8080_ssmJarTemplate_testJson]

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

输入用户名以及年龄，点击提交

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

可以看到提示效果

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

这时看后台输出

![Image 1][]![20181224131752929.jpg][]

这样后台就接受到浏览器提交的json数据并转换成user对象。

### 前端通过AJAX获得一个User对象并显示 ###

#### 新建前端jsp ####

在jsp目录下新建getOneUser.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
     
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    
    <%
     pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>用AJAX以JSON方式提交数据</title>  
    </head>  
    <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
    <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <body>
    <input type="button" class="btn btn-success" value="通过AJAX获取一个User对象---" id="sender">   
       
        <div id="messageDiv" class="alert alert-success" role="alert"></div>  
           
        <script>  
        $('#sender').click(function(){  
            var url="getOneUser";  
            $.post(
                    url, 
                    function(data) {
                         var json=JSON.parse(data);  
                         var name =json.user.name;  
                         var id = json.user.id;
                         var age = json.user.age;
                         $("#messageDiv").html("用户id："+ id + "<br>用户名称:" +name+"<br>用户年龄:"+age );
                          
             });   
        });  
        </script>  
    </body>
    </html>

#### 编写后台Controller ####

在userController下新建getOneUser模拟从数据库查询一个User对象并返回给前段并返回给前端

@ResponseBody
      @RequestMapping("/getOneUser")
      public String getOneUser() {
              User user = new User();
              user.setId(100);
              user.setName("第100个用户");
              user.setAge(100);
              JSONObject json= new JSONObject();
              json.put("user", JSONObject.toJSON(user));
              return json.toJSONString();
         }

修改上面的testJson请求方法，用于跳转到jsp页面到getOneUser.jsp

@RequestMapping("testJson")
     public ModelAndView testJson(){
      ModelAndView mav = new ModelAndView();
      // 放入jsp路径
      mav.setViewName("getOneUser");
      return mav;
     }

将项目部署到服务器，部署到服务器，启动服务器，输入：

[http://localhost:8080/ssmJarTemplate/testJson][http_localhost_8080_ssmJarTemplate_testJson]

![Image 1][]![20181224131838895.jpg][]

点击按钮后

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

### 通过AJAX请求后台获取多个User ###

#### 新建jsp页面 ####

在jsp目录下新建getManyUser.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
     
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    
    <%
     pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>用AJAX以JSON方式提交数据</title>  
    </head>  
    <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
    <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <body>
    	<input type="button" class="btn btn-success" value="通过AJAX获取多个user对象" id="sender">   
       
        <div id="messageDiv" class="alert alert-success" role="alert"></div>  
           
        <script>  
        $('#sender').click(function(){  
            var url="getManyUser";  
            $.post(
                    url, 
                    function(data) { 
                    	console.log(data);
                        var users = $.parseJSON(data);
                    	console.log(users.length);
                         for(i in users){
                             var old = $("#messageDiv").html();
                             var user = users[i];
                             $("#messageDiv").html(old + "<br>"+user.id+"   -----   "+user.name+"   -----   "+user.age);  
                         }
             });   
        });  
        </script>  
    </body>
    </html>

#### 新建Controller ####

在userControler下新建getManyUser用来模拟从数据库查询多个User对象返回一个list

@ResponseBody
      @RequestMapping("/getManyUser")
         public String getManyUser() {
             List<User> us = new ArrayList<>();
             for (int i = 0; i < 10; i++) {
                 User user = new User();
                 user.setId(i);
                 user.setName("用户名称:"+i);
                 user.setAge(i+1);
                 us.add(user);
             }
     
             return JSONObject.toJSON(us).toString();
         }

修改前面的testJson实现页面跳转到getManyUser.jsp

@RequestMapping("testJson")
     public ModelAndView testJson(){
      ModelAndView mav = new ModelAndView();
      // 放入jsp路径
      mav.setViewName("getManyUser");
      return mav;
     }

#### 部署项目 ####

将项目部署到服务器，启动服务器，浏览器输入：

[http://localhost:8080/ssmJarTemplate/testJson][http_localhost_8080_ssmJarTemplate_testJson]

## ![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][] ##

点击按钮

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5][]

## 源码下载 ##

[https://download.csdn.net/download/badao\_liumang\_qizhi/10872249][https_download.csdn.net_download_badao_liumang_qizhi_10872249]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_85165504]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/85165504
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_85037589]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/85037589
[http_localhost_8080_ssmJarTemplate_testJson]: http://localhost:8080/ssmJarTemplate/testJson
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181224131729879.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181224131736739.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181224131741989.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20181224131752929.jpg]: https://img-blog.csdnimg.cn/20181224131752929.jpg
[20181224131838895.jpg]: https://img-blog.csdnimg.cn/20181224131838895.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20181224131843873.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20181224131931217.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2018122413193610.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_badao_liumang_qizhi_10872249]: https://download.csdn.net/download/badao_liumang_qizhi/10872249