文章目录

一、前端

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>
        // 构建json
        let json = {}
        let list = []

        document.getElementsByTagName("button")[0].onclick = function() {
            // 获取input标签对应的值
            let ageval = document.getElementById("age").value
            let idval = document.getElementById("id").value
            let nameval = document.getElementById("name").value

            // 拼接json
            json['age'] = 21
            json['id'] = 22
            json['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,Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE 5,IE 6
                xmlhttp = new ActiveXObject("Microsoft XMLHTTP");
            }
            xmlhttp.onreadystatechange = function(){
                // 判断状态码
                if(xmlhttp.readyState == 4 && xmlhttp.readyState == 200){
                    // 打印服务器返回的数据
                    console.log(xmlhttp.responseText);
                }
            }
            // 发送get请求，路径，false
            xmlhttp.open("GET","<%=request.getContextPath()%>/Json/test2?json="+json,false)
            // 发送
            xmlhttp.send();
        }
    </script>
</body>
</html>

【Spring MVC】Json 前后端合并_学习笔记

我们最终给你实现的效果是在页面中提交数据对应的添加到 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)
  @ResponseBody
  public Object operJsonMix(@RequestParam("json") String json1) throws Exception{
    // JSON -> Bean
    ObjectMapper 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;
    }
    @Override
    public String toString() {
        return "JsonBean [age=" + age + ", name=" + name + ", id=" + id + "]";
    }
}

三、实现效果

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

【Spring MVC】Json 前后端合并_springmvc_02