JSON
-
概念:JavaScriptObject Notation。 JavaScript对象表示法。
-
由于语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输。
-
JavaScript对象
{ name:"zhangsan", age:18, city:"beijing" }
-
JSON
{ "name":"zhangsan", "age":18, "city":"beijing" }
-
JSON基础语法
-
<script> //定义JSON var json = { "name":"zhangsan", "age":18, "addr":["北京","上海","西安"] }; //获取值 alert(json.name); alert(json.addr); </script>
JSON数据与Java对象转换
-
Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库,是目前java语言中最快的JSON库,可以实现java对象和JSON字符串的相互转换。
-
使用:
-
导入坐标
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency>
-
Java对象转JSON
//1.将java对象转为JSON字符串 User user = new User(); user.setId(1); user.setUsername("zhangsan"); user.setPassworld("123123"); String s = JSON.toJSONString(user);
-
JSON字符串转Java对象
//将json字符串转为Java对象 User user1 = JSON.parseObject("{\"id\":1,\"passworld\":\"123123\",\"username\":\"zhangsan\"}\n", User.class);
-
案例
- 使用Axios + JSON 完成品牌列表数据查询和添加
查
-
查询
思路,当页面加载完成后发送ajax请求,经过json将Java对象转化为字符串,用Axios获取到数据,再通过js拼成。
@WebServlet("/selectAllServlet") public class SelectAllServlet extends HttpServlet { private BrandService brandService = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.调用servic查询, List<Brand> brands = brandService.selectAll(); //2.将集合转化为JSON数据 序列化 String s = JSON.toJSONString(brands); //3.将字符串响应到页面 response.setContentType("text/json;charset=utf-8"); response.getWriter().write(s); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
<script src="js/axios-0.18.0.js"></script> <script> //1. 当页面加载完成后发送ajax请求 window.onload =function (){ //2.发送ajax请求 axios({ method:"get", url:"http://localhost:8080/brand-demo/selectAllServlet" }).then(function (resp){ //获取数据 let brands = resp.data; let tableData = " <tr>\n" + " <th>序号</th>\n" + " <th>品牌名称</th>\n" + " <th>企业名称</th>\n" + " <th>排序</th>\n" + " <th>品牌介绍</th>\n" + " <th>状态</th>\n" + " <th>操作</th>\n" + " </tr>"; for (let i = 0; i < brands.length; i++) { let brand = brands[i]; tableData += "\n"+ "<tr align=\"center\">\n" + " <td>"+(i+1)+"</td>\n" + " <td>"+brand.brandName+"</td>\n" + " <td>"+brand.companyName+"</td>\n" + " <td>"+brand.ordered+"</td>\n" + " <td>"+brand.description+"</td>\n" + " <td>"+ brand.status+"</td>\n" + "\n" + " <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" + " </tr>"; } //设置表格数据 document.getElementById("brandTable").innerHTML=tableData; }) }
增
@WebServlet( "/addServlet")
public class AddServlet extends HttpServlet {
private BrandService brandService = new BrandService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//request.getParameter() 此方法不能接收json数据
//1.获取请求体数据
BufferedReader reader = request.getReader();
String s = reader.readLine();
//将json字符串转为java对象
Brand bo = JSON.parseObject(s, Brand.class);
//2.调用service 添加
brandService.add(bo);
//3. 响应成功标识
response.getWriter().write("success");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<form action="" method="post">
品牌名称:<input id="brandName" name="brandName"><br>
企业名称:<input id="companyName" name="companyName"><br>
排序:<input id="ordered" name="ordered"><br>
描述信息:<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
状态:
<input type="radio" name="status" value="0">禁用
<input type="radio" name="status" value="1">启用<br>
<input type="button" id="btn" value="提交">
</form>
<script src="js/axios-0.18.0.js"></script>
<script>
//1.给普通按钮绑定单击事件
document.getElementById("btn").onclick = function (){
//将表单数据转为json
var formData= {
brandName:"",
companyName:"",
ordered:"",
description:"",
status:"",
}
//获取表单数据
let brandName = document.getElementById("brandName").value;
//设置数据
formData.brandName=brandName;
let companyName = document.getElementById("companyName").value;
formData.companyName=companyName;
//获取表单数据
let ordered = document.getElementById("ordered").value;
//设置数据
formData.ordered=ordered;
//获取表单数据
let description = document.getElementById("description").value;
//设置数据
formData.description=description;
//获取表单数据
let status = document.getElementsByName("status");
for (let i = 0; i < status.length; i++) {
if (status[i].checked){
formData.status=status[i].value;
}
}
console.log(formData);
//2.发送ajax请求
axios({
method:"post",
url:"http://localhost:8080/brand-demo/addServlet",
data:formData
}).then(function (resp){
//判断响应数据是否为success
if (resp.data=="success"){
location.href='http://localhost:8080/brand-demo/brand.html';
}
})
}
</script>
</body>
</html>