content

What is JSON and what is it for?

JSON is a data exchange format standard in the industry. JSON exists in the form of JS objects in JS

JavaScript Object Notation (JavaScript Object Notation), or JSON for short. (Data interchange format)
The main function of JSON is: a standard data interchange format. (It is very popular at present. More than 90% of the systems, when system A and system B exchange data, use JSON.)

2. JSON is a standard lightweight data delivery format. Features are: small size, easy to analyze .

3. In actual development, there are two data exchange formats, which are used the most, one is JSON and the other is XML. XM L is larger in size and can parse hemp frequency, but it has its advantages: strict grammar . (Usually XML is used for data exchange between bank-related systems.)

JSON syntax format:

var jsonObj = {

"property name" : property value,

"property name" : property value,

"property name" : property value,

...........

}

//Create JSON object ( JSON can also be called untyped object . Lightweight, lightweight. Small size. Easy to parse.)

  <script text/javasctipt>
 var studentObj={
    "sno":"110","sname":"张三","sex":"男"
};

//访间JSON对象的属性
alert(studentObj.sno+","+studentObj.sname +","+ studentObj.sex)
   </script>

Create JSON array and iterate

<script type="text/javascript">
// 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>

More complex JSON objects

The json object can contain json objects, and arrays such as arrays can be accessed with subscripts

Access objects can be accessed with ".", such as "drink" in aihao, user.address.aihao[1]

  <script type="text/javascript">
    var user ={
        "usercode":110,"username":"王五",
        "sex":["男","女"],
        "address":{
              "city":"北京",
              "street":"大兴区",
              "zipcode":"12212121",
              "aihao" : ["smoke","drink","tt"]
         }
   }
      // 访问人名以及居住的城市
      alert(user.username+user.sex[0]+",居住在"+user.address.city+",喜欢"+user.address.aihao[0]);
      </script>

eval function

The role of the eval function is
to interpret and execute the string as a piece of JS code.

Such as:

window.eval("var i=100:"); alert("i="+i);//i=100

Java connects to the database, after querying the data, the data is spliced into a "string" in JSON format in the java program, and the JSON format string is responded to the browser

That is to say, what Java responds to the browser is just a "JSON formatted string" and not a JSON object.
You can use the eval map to convert JSON-formatted strings into JSON objects.

  <script type="text/javascript">
    //这是java程序给发过来的ison格式的"字符串”//将以上的json格式的字符串转换成json对象 
    var fromJava="{\"name\":\"zhangsan!\",\"password\":\"123456\"}";
    window.eval("var jsonObj="+fromJava);//相当于用jsonObj创建了对象
    // 访问json对象
    alert(jsonObj.name +","+jsonObj.password);// 在前端取数据。
    </script>

result:

Interview questions:

In JS: What is the difference between [ ] and { }?

[ ] is an array

{ } is the JSON object

Arrays in java : int arr={1,2,3,4};

Array in js : var arr=[1,2,3,4];

Array in JSON : var jsonObj={"name ": "Zhang San", "age": "12"};

Usage of table

  <script type="text/javascript">
    var data={
        "total" :4,
        "emps" :[
            {"empno" :110,"ename":"SMiTH","sal": 100},
            {"empno" :120,"ename":"SMiTH","sal": 100},
            {"empno" :130,"ename":"SMiTH","sal": 100},
            {"empno" :140,"ename":"SMiTH","sal": 100}
       ]
    };
    
    window.onload = function(){
        var displayBtnElt =document.getElementById("displayBtn"); 
           displayBtnElt.onclick =function(){
           var emps = data.emps; 
           var html ="";
            for(var i = 0; i<emps.length; i++){
             var emp = emps[i];
              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;
        }
    }
    </script>
    <input type="button" value="显示员工信息列表" id="displayBtn"/>
    <h2>员工信息列表</h2>
    <hr>
    <table border="1px" width="50%">
     <tr>
         <th>员工编号</th>
        <th>员工名字</th>
        <th>员工薪资</th>
     </tr>
    <tbody id="emptboy">
    </tbody>
    </table>
    总共<span id="count"></span>

【JavaScript】Use of JSON