JavaScript48-53：JSON

最新推荐文章于 2024-10-11 13:58:34 发布

高开低走。

最新推荐文章于 2024-10-11 13:58:34 发布

阅读量119

点赞数

分类专栏：锦到说JavaScript 文章标签： json java

本文链接：https://blog.csdn.net/qq_43568982/article/details/117469173

版权

锦到说JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

开始时间：2021-06-03

JSON

JavaScript Object Notation(JSON)数据交换格式
一种标准的数据交换格式。系统A与系统B交换数据的话，采用JSON
体积小，易解析

还有一种是XML，体积大，较为复杂，但语法严谨，适合银行业务等
类似于Python中的字典

JSON示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSON学习</title>
</head>

<body>
<script type="text/javascript">
        //创建一个json对象
    var stuObj={
        "sno":"110",
        "sname":"张三",
        "sex":"男",
            }
    alert(stuObj.sno+","+stuObj.sname+","+stuObj.sex);
        //自建的是有类型的，而用json则是没有类型的(无类型对象)
   
    Student=function(sno,sname,sex){
            this.sno=sno;
            this.sname=sname;
            this.sex=sex;
        }
        var stu=new Student("111","李四","男");
        alert(stu.sno+","+stu.sname+","+stu.sex);
    
    
    //JSON数组
    var  students=[
        {"sno":"110","sname":"张三","sex":"男"},
        {"sno":"120","sname":"李四","sex":"男"},
        {"sno":"130","sname":"王五","sex":"男"}
    ]
    
    for(var i=0;i<students.length;i++){
        var stuObj=students[i];
        alert(stuObj.sno+","+stuObj.sname+","+stuObj.sex);
    }
    </script>
</body>
</html>

JSON的语法格式

var jsonObj={
“属性名”:属性值,
“属性名”:属性值,
“属性名”:属性值,
“属性名”:属性值,
};

复杂JSON对象示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复杂JSON对象</title>
</head>

<body>
    <script type="text/javascript">
    
    var user={
        "usercode":110,
        "username":"张三",
        "sex":true,
        //key:value value用一个json组成
        "address":{"city":"Beijing","street":"xitucheng"},
        //数组里面可以套新的json格式数据，也可以套函数
        "hobby":["basketball","tennis"]
    };
    
    var 
    alert(user.username+user.address.street);
    </script>
</body>
</html>

本质上，JSON是用来生成对象的一种简化版本

JSON实现服务端与JavaScript之间的通信

创建一个Servlet类
在类里面赋值不能直接赋一个对象，要把对象的各属性写成JSON格式添加为字符串，然后进行赋值

public class OneServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //直接传高级对象，传的是引用地址
        //Student student = new Student(15, "xiaohong");
        //String str=new String(); 这种传的是引用地址
        //下面这种传的是值
        String str = "{\"sid\":10,\"sname\":\"mike\"}";
        request.setAttribute("key", str);
        request.getRequestDispatcher("/index2.jsp").forward(request, response);
    }

}

<script type="text/javascript">
    var stuObj =${requestScope.key};
    window.alert(stuObj.sid + " " + stuObj.sname);
</script>

如果属性值特别多，那么直接写很不方便，因为习惯了直接传一个对象过去工作
因此需要补充一个工具类
这里用到的反射的知识，参考博客

package util;
public class Reflectutil {
    public static String jsonObject(Object obj) {
        Class classFile = null;
        Field fieldArray[] = null;
        StringBuffer str = new StringBuffer("{");
        //获取字节码文件
        classFile = obj.getClass();
        //得到字节码文件中的数据，存入数组中
        fieldArray = classFile.getDeclaredFields();
        try {
            //获取数组中的每一个元素
            for (Field field : fieldArray
            ) {
                //String str = "{\"sid\":10,\"sname\":\"mike\"}";
                //要做成上面这个样子才行
                //私有对象要通过反射来访问，需要先设置true
                field.setAccessible(true);
                //单个元素
                String fieldName = field.getName();
                //对私有变量进行访问
                Object value = field.get(obj);
                str.append("\"");
                str.append(fieldName);
                str.append("\":");
                str.append("\"");
                str.append(value);
                str.append("\"");
                str.append(",");
            }
            //最后一个是不需要逗号的
            str.deleteCharAt(str.length() - 1);
            str.append("}");
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

        return str.toString();
    }
}

在Servlet里面就可以传对象实现构造JSON了

public class OneServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //直接传高级对象，传的是引用地址
        Student student = new Student(15, "xiaohong");
        //String str = "{\"sid\":10,\"sname\":\"mike\"}";
        String str = Reflectutil.jsonObject(student);
        request.setAttribute("key", str);
        request.getRequestDispatcher("/index2.jsp").forward(request, response);
    }

}

JSON工具包

自己写工具类太麻烦了，就可以调用JSON工具包来完成功能实现
需要导包放入WEB-INF下的lib包，再把六个包选中，右键找到add as library
在这里插入图片描述

写一个Servlet

package Servlet;

import entity.Dept;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;


import javax.json.JsonObject;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class TwoServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Dept dept1 = new Dept(10, "社保事业部", "大兴区");
        Dept dept2 = new Dept(20, "金融事业部", "顺义区");
        Dept dept3 = new Dept(30, "公共关系事业部", "平谷区");
        List deptList = new ArrayList();
        deptList.add(dept1);
        deptList.add(dept2);
        deptList.add(dept3);

        //通过json.jar工具类将集合内容转换为【JSON数组格式】字符串
        JSONArray jsonArray = JSONArray.fromObject(deptList);

        //jsonObject里面的toString已经被重写了
        request.setAttribute("key", jsonArray.toString());
        request.getRequestDispatcher("/index3.jsp").forward(request, response);
    }
}

还要写一个JSP


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript">
    function init() {
        var jsonArray =${requestScope.key};

        for (var i = 0; i < jsonArray.length; i++) {
            var jsonObj = jsonArray[i]  //{deptNo,dname,loc}
            var trDom = document.createElement("tr"); //<tr></tr>
            var tdDom_1 = document.createElement("td");
            var tdDom_2 = document.createElement("td");
            var tdDom_3 = document.createElement("td");
            tdDom_1.innerHTML = jsonObj.deptNo; //<td>10</td>
            tdDom_2.innerHTML = jsonObj.dname;  //<td>Accounting</td>
            tdDom_3.innerHTML = jsonObj.loc;    //<td>New York</td>
            //添加子标签
            trDom.appendChild(tdDom_1)
            trDom.appendChild(tdDom_2)
            trDom.appendChild(tdDom_3)
            document.getElementById("one").appendChild(trDom);
        }
    }
</script>
<body onload="init()">
<table border="2" style="color: black" id="one">
    <tr>
        <td>部门编号</td>
        <td>部门名称</td>
        <td>部门位置</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

eval函数

eval函数的作用：将字符串当做一段JS代码解释并执行

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>eval函数</title>
</head>

<body>
    <script type="text/javascript">
    //eval函数的作用
        //将字符串当做一段JS代码解释并执行
    window.eval("var i=100");
        //上面是字符串，但是当做了代码直接执行了
        alert(i);
        
    //eval可以用来处理Java发过来的字符串 转为JSON对象
    var fromJava="{\"name\":\"zhangsan\",\"password\":\"123\"}";
        window.eval("var jsonObj="+ fromJava);
        alert(jsonObj.name);
    </script>
</body>
</html>

在]s当中:[]和0有什么区别?
[]是数组。
{}是JSON。
java中的数组:int[]arr = {1,2,3,4,5};
Js中的数组:var arr = [1,2,3,4,5];
JSON: var json0bj = {“email” : “zhangsan@123.com” , “age”:25};

设置table

显示员工信息列表
在这里插入图片描述
隐藏员工信息列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置table的</title>
</head>

<body>
    <script type="text/javascript">
    //JSON对象
    var data={
        "total":4,
        "emps":[
            {"empno":7369,"ename":"smith","sal":800},
            {"empno":7370,"ename":"smith2","sal":1800},
            {"empno":7379,"ename":"smith3","sal":2800},
            {"empno":7399,"ename":"smith4","sal":3800}
        ]
    };
       //写显示函数
        window.onload=function(){
            var displayBtnElt=document.getElementById("displayBtn");
            displayBtnElt.onclick=function(){
            //读取JSON对象
                var emps=data.emps;
                var html="";
                for(var i=0;i<emps.length;i++){
                    var emp=emps[i];
                    //将JSON对象读取到字符串里面
                    html+="<tr>";
                    html+="<td>"+emp.empno+"</td>";
                    html+="<td>"+emp.ename+"</td>";
                    html+="<td>"+emp.sal+"</td>";
                     html+="</tr>";
                }
                //在页面显示读取的字符串
                document.getElementById("emptbody").innerHTML=html;
                document.getElementById("count").innerHTML=data.total;
            }
            //隐藏字符串
            var hiddenBtnElt=document.getElementById("hiddenBtn");
            hiddenBtnElt.onclick=function(){
                document.getElementById("emptbody").innerHTML="";
                document.getElementById("count").innerHTML="";
            }
        }
    
    </script>
    <input type="button" value="显示员工信息列表" id="displayBtn"/>
    <input type="button" value="隐藏员工信息列表" id="hiddenBtn"/>
    <h2>员工信息列表</h2>
    <hr>
    <table border="1px" width="50%">
        <tr>
            <th>员工编号</th>
            <th>员工名字</th>
            <th>员工薪资</th>        
        </tr>
        <!--留足数据显示的位置-->
        <tbody id="emptbody">
        </tbody>
    
    </table>
    总共<span id="count"></span>条数
</body>
</html>