SSM中通过Json做前后端分离
生活随笔
收集整理的這篇文章主要介紹了
SSM中通过Json做前后端分离
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
前面項目已經搭建到SSM中進行注解式和XML配置式事務管理階段
參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/85165504
在此項目基礎上搭建使用json進行前后端交互
實現
項目配置
1.引入bootstrap以及jquery
參照:
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.xsdhttp://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsdhttp://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsdhttp://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsdhttp://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsdhttp://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: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 /><beanclass="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
輸入用戶名以及年齡，點擊提交
可以看到提示效果
這時看后臺輸出
這樣后臺就接受到瀏覽器提交的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
點擊按鈕后
通過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
點擊按鈕
源碼下載
https://download.csdn.net/download/badao_liumang_qizhi/10872249
總結
以上是生活随笔為你收集整理的SSM中通过Json做前后端分离的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Maven项目中引入spring-tes
- 下一篇： SSM整合+分页+Druid+CRU+l