前端json和js相互转换

n和js的区别就是json是字符串类型的js。
JSON.stringify（）可以在前端把js对象转换成json字符串传给后台
JSON.parse()这个方法是把json字符串转换成js对象

前端演示

需要注意的就是json的key值一定是字符串类型，你看我的key
全部都打了双引号的。
而js是可打可不打双引号

<script>
  var str = {"name":"zhangsan",
             "age":18}
  //转换成json字符串
  alert(str);
 var  jsonstr=  JSON.stringify(str);
 alert(jsonstr);
var jsonobject =  JSON.parse(jsonstr);
alert(jsonobject);
</script>

依次跳出的效果如下
在这里插入图片描述

后台演示

主要用lgson工具包的两个方法
1.gson.toJson（）把其他类型转换成gson字符串类型
2.gson.fromJson(gson字符串，对象.getclass())

我用的是gson这个工具包，当然你也可以用其他插件，当然功能都大同小异，不过方法不一样

  Gson gson = new Gson();
        ArrayList<String> list = new ArrayList<>();
        list.add("张三");
        list.add("李四");
        list.add("王五");
        System.out.println("我是集合"+list);
        String s = gson.toJson(list);
        System.out.println("我是集合转换后的json字符串"+s);
        ArrayList arrayList = gson.fromJson(s, list.getClass());
        System.out.println("我是json转换后的集合"+arrayList);

效果如下
在这里插入图片描述

前后台交互

前端我一般用的是ajax传的通过ajax的data传送给后台，而后台接受通过传输data的key的来获取数据内容
后端给前端传值我一般是用的servlet的req.setAttribute（“key”,value)
前端接受用el表达式

后端代码

@WebServlet("/tt")
public class TestAjax  extends HttpServlet {
	/*在ajax的请求内，一定不要进行转发或者重定向*/
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		Gson gson = new Gson();
		ArrayList<String> list = new ArrayList<>();
		list.add("张三");
		list.add("李四");
		list.add("王五");
		String s = gson.toJson(list);
		req.setAttribute("list",s);
		Object o = new Object();
		String js = req.getParameter("jsonstr");
		Object o1 = gson.fromJson(js, o.getClass());
		System.out.println(o1);
	}
}

前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
          + path + "/";
%>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<html>
  <head>
    <title></title>
  </head>
  <%--获取request里面保存的数据 --%>
  <%--使用EL表达式来获取  语法结构： ${键值}--%>
  <%--为什么会有EL表达式，其实就是写法方便--%>
  <body>
    <h1>${list}</h1>

  </body>
<script>
  var str = {"name":"zhangsan",
    "age":18}
  var  jsonstr=  JSON.stringify(str);
  $.ajax({
    type:"post",
    url:"<%=basePath%>tt",
    dataType:"text",
    data:{jsonstr:jsonstr},
    success:function (info) {
    var  jsonstr=  JSON.stringify(${list});
    alert("收到来自后端的json数据"+jsonstr);
    },
    },
    error:function () {
      layer.msg("ajax请求失败",{icon:2});//这个是一个框架里面的，不用管。
    }

  })
</script>

后端输出
在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_44883971/article/details/108552046