JSON初探

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字符串的相互转换。

• 使用：

  1. 导入坐标

      <dependency>
           <groupId>com.alibaba</groupId>
           <artifactId>fastjson</artifactId>
           <version>1.2.62</version>
         </dependency>
     

  2. Java对象转JSON

     //1.将java对象转为JSON字符串
             User user = new User();
     
             user.setId(1);
             user.setUsername("zhangsan");
             user.setPassworld("123123");
     
             String s = JSON.toJSONString(user);
     

  3. JSON字符串转Java对象

     //将json字符串转为Java对象
     User user1 = JSON.parseObject("{\"id\":1,\"passworld\":\"123123\",\"username\":\"zhangsan\"}\n", User.class);
     

案例

• 使用Axios + JSON 完成品牌列表数据查询和添加

查

1. 查询

   思路，当页面加载完成后发送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>