【Spring MVC】Json 前后端合并

文章目录

一、前端
- 1. Jackson.jsp
二、后端
- 1. Controller层
- 2.doamin_bean类
三、实现效果

一、前端

1. Jackson.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JsonTest</title>
</head>
<body><form onsubmit="return false"><input type="text" id="age" placeholder="请输入年龄~" /><br /><input type="text" id="id" placeholder="请输入编号~" /><br /><input type="text" id="name" placeholder="请输入姓名~" /><br /><button>提交</button></form><script>// 构建jsonlet json = {}let list = []document.getElementsByTagName("button")[0].onclick = function() {// 获取input标签对应的值let ageval = document.getElementById("age").valuelet idval = document.getElementById("id").valuelet nameval = document.getElementById("name").value// 拼接jsonjson['age'] = 21json['id'] = 22json['name'] = 'zyx'// jsonArray操作let jsonObj = {'name': nameval,'age': parseInt(ageval),'id': parseInt(idval)}list.push(jsonObj)json['list'] = list// 控制台打印输出//console.log(json)// JSON.stringify(json) 将json值转换为相应的JSON格式requestOper2(JSON.stringify(json))}function requestOper2(json) {/*最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。使用XMLHttpRequest (XHR)对象可以与服务器交互。可以从URL获取数据，而无需让整个的页面刷新。这使得Web页面可以只更新页面的局部，而不影响用户的操作*/var xmlhttp;if (window.XMLHttpRequest) {// IE7+，Firefox,Chorm,Opera,Safarixmlhttp = new XMLHttpRequest();} else {// IE 5,IE 6xmlhttp = new ActiveXObject("Microsoft XMLHTTP");}xmlhttp.onreadystatechange = function(){// 判断状态码if(xmlhttp.readyState == 4 && xmlhttp.readyState == 200){// 打印服务器返回的数据console.log(xmlhttp.responseText);}}// 发送get请求，路径，falsexmlhttp.open("GET","<%=request.getContextPath()%>/Json/test2?json="+json,false)// 发送xmlhttp.send();}</script>
</body>
</html>

我们最终给你实现的效果是在页面中提交数据对应的添加到 json 中的list中，最终返回完整的字符串。输入几个，json中的list就会填充几个。

注意：

这里的uri前面使用<%=request.getContextPath()%>，就是获取当前的内容文件路径，目的是为了避免跨域请求。

二、后端

1. Controller层

主要是对于参数json的处理！

package com.hanz.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zyx.anno.domain.JsonBean1;@Controller
@RequestMapping(value="/Json")
public class JsonOperation {@RequestMapping(value="/test2",method=RequestMethod.GET)@ResponseBodypublic Object operJsonMix(@RequestParam("json") String json1) throws Exception{// JSON -> BeanObjectMapper objectMapper = new ObjectMapper();JsonBean1 jsonBean1 = objectMapper.readValue(json1, JsonBean1.class);System.out.println("变换前"+json1);System.out.println("json中的list大小是："+jsonBean1.getList().size());// 修改数据jsonBean1.getList().get(0).setName("zyx");// Bean -> JSon//String result = objectMapper.writeValueAsString(jsonBean1);return jsonBean1;}
}

2.doamin_bean类

封装两种json类型的数据，一种是JsonObject，还一种是嵌套了JsonArray的json字符串对象。

package com.hanz.anno.domain;import java.util.List;
/*嵌套类
*/
public class JsonBean1 {private Integer age;private String name;private Integer id;private List<JsonBean> list;public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public List<JsonBean> getList() {return list;}public void setList(List<JsonBean> list) {this.list = list;}
}package com.hanz.anno.domain;
/*JsonObejct类
*/
public class JsonBean {private Integer age;private String name;private Integer id;public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}@Overridepublic String toString() {return "JsonBean [age=" + age + ", name=" + name + ", id=" + id + "]";}
}

三、实现效果

最终每一次提交，都会将新表单中的数据以json的形式放入list中去！

【Spring MVC】Json 前后端合并相关推荐

一步步完成jsRender + Spring MVC + Nginx前后端分离示例
2019独角兽企业重金招聘Python工程师标准>>> 本篇博文的目标是使用前端页面渲染插件jsRender做前后端分离,后端采用Spring MVC给出REST API,并结合Ng ...
从 MVC 到前后端分离
转载自:https://my.oschina.net/huangyong/blog/521891 从MVC到前后端分离 1.理解 MVC MVC是一种经典的设计模式,全名为Model-View-Con ...
前后端分离-从MVC到前后端分离
2019独角兽企业重金招聘Python工程师标准>>> 摘要:MVC模式早在上个世纪70年代就诞生了,直到今天它依然存在,可见生命力相当之强.MVC模式最早用于Smalltalk语言 ...
phython在file同时写入两个_喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
Spring Boot+Vue/前后端分离/高并发/秒杀实战课程之spring Security快速搭建oauth2 内存版身份认证
Springboot快速搭建oauth2 内存版身份认证环境准备点击[Create New Project]创建一个新的项目项目环境配置配置Thymeleaf 搭建oauth2认证,加入两个依 ...
spring boot+iview 前后端分离架构之文件上传的实现（三十一）
spring boot 与 iview 前后端分离架构之文件上传的实现(三十一) 公众号文件上传前端改造 main.js引入配置的全局变量编写baseImgUpload图片上传组件 baseIm ...
spring boot+iview 前后端分离架构之用户管理的实现（三十）
spring boot 与 iview 前后端分离架构之用户管理的实现(三十) 公众号用户管理相关工具类的实现 User实体改造 UserOrg实体改造 UserRole实体改造 UserRole ...
从MVC到前后端分离
摘要:MVC模式早在上个世纪70年代就诞生了,直到今天它依然存在,可见生命力相当之强.MVC模式最早用于Smalltalk语言中,最后在其它许多开发语言中都得到了很好的应用,例如,Java中的Stru ...
从MVC到前后端分离（REST-个人也认为是目前比较流行和比较好的方式）
2019独角兽企业重金招聘Python工程师标准>>> 摘要:MVC模式早在上个世纪70年代就诞生了,直到今天它依然存在,可见生命力相当之强.MVC模式最早用于Smalltalk语言 ...

【Spring MVC】Json 前后端合并

文章目录

一、前端

1. Jackson.jsp

二、后端

1. Controller层

2.doamin_bean类

三、实现效果

【Spring MVC】Json 前后端合并相关推荐

最新文章

热门文章