json其实是JavaScript对象表示法,数据可以使用json来表示。它看起来非常像对象字面量语法,但它并不是对象。
当json在服务和web浏览器之间传输的时候是以字符串形式来传送的,在将json对象转换成json字符串发送给服务器叫做序列化,在接受服务器发送过来的json字符串并且将其转换成json对象叫做反序列化。
在JavaScript中有两种转换成json的方法:
第一 eval()方法
var json = ‘[ { "name" : "卫庄", "age" : 20},{ "name" : "盖聂", "age" : 20},{ "name" : "谭慧东", "age" : 23}]‘; var box = eval(json);
第二 JSON内建对象,但IE并不兼容,不过有大佬写了json2.js可以兼容IE,https://github.com/douglascrockford/JSON-js
序列化方法: stringify()
var json = [ { name : "卫庄", age : 20},{ name : "盖聂", age : 20},{ name : "谭慧东", age : 23}]; //模拟json对象 var box = JSON.stringify(json); //stringify 将JavaScript原生值转换为json格式值
反序列化方法:parse()
var json = ‘[ { "name" : "卫庄", "age" : 20},{ "name" : "盖聂", "age" : 20},{ "name" : "谭慧东", "age" : 23}]‘; //模拟获取json格式 var box = JSON.parse(json); //parse 将json转换为JavaScript原生值。
下面是ajax加载json
// json文件text.json{ "events" : [ { "location" : "San Francisco, CA", "date" : "May 1", "map" : "img/001.jpg" }, { "location" : "Austin, TX", "date" : "May 15", "map" : "img/002.jpg" }, { "location" : "New York, NY", "date" : "May 30", "map" : "img/003.jpg" } ] }
//js代码 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘); //获取ajax对象 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200){ //响应成功后 var responseObject = JSON.parse(xhr.responseText); //获取的json字符串转换成json对象 var content = ‘<div class="header">‘; //将对象结合标签对 转换HTML格式 for (var i = 0; i < responseObject.events.length; i++){ content += ‘<div class="date">‘; content += ‘<div class="image">‘; content += ‘<img src="‘ + responseObject.events[i].map + ‘" class="image‘ + (i+1) + ‘">‘; content += ‘</div>‘; content += ‘<p>‘ + responseObject.events[i].location + ‘</p>‘; content += ‘<span>‘ + responseObject.events[i].date + ‘</span>‘; content += ‘</div>‘; } content += ‘<div>‘; document.getElementById(‘container‘).innerHTML = content; //使用innerHTML的赋值方式,将其添加到页面中。 } } xhr.open(‘get‘,‘json/text.json‘,true); //准备请求 xhr.send(null); //发送请求
原文地址:https://www.cnblogs.com/tanhuidong/p/8824784.html
时间: 2024-11-09 03:05:27