json前后台传值方法,json和js相互转换的方法
前端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>
后端输出