【Ajax异步交互与跨域访问】Json数据格式
一. JSON是什么
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON是独立于任何语言的文本格式，易于程序员阅读和编写，同时易于计算机解析和生成
-
JSON分为两种结构
- “键/值”对的集合。不同语言中，它被理解为对象、记录、结构、字典、哈希表、关联数组等
- JSON中键值对的集合是无序的’名称/值’的集合。如
{name:admin,passworld:6666}
- JSON中键值对的集合是无序的’名称/值’的集合。如
- 值的有序列表.在大部分语言中，被理解为数组(array)。
- JSON格式中作为值的类型可以是字符串、数值、true、false、null、对象、数组。如
[red,blue]
- JSON格式中作为值的类型可以是字符串、数值、true、false、null、对象、数组。如
- “键/值”对的集合。不同语言中，它被理解为对象、记录、结构、字典、哈希表、关联数组等
-
JSON文件
JSON独立的文件，拓展名为‘.json’。文件中允许保存JSON格式的数据。
{"name":"admin","passworld":666666,"classes":["www2","www1"] }
二. JavaScript中的JSON
JSON是一种语法，用来序列化对象、数组、数值、字符串、布尔值和null。它基于JavaScript语法，但它不是JavaScript。
| JavaScript类型 | JSON的不同点 |
|---|---|
| 对象和数组 | 属性名称必须是双引号括起来的字符串；最后一个属性后不能有逗号 |
| 数值 | 禁止出现前导零 |
| 字符串 | 只有有限的一些字符可能被转义 |
-
JSON字符串就是指在JavaScript语言中内容格式符合JSON格式的字符串类型的数据
var jsonText = '{"name":"admin","text":"students"}'; -
JSON对象就是指JSON格式在JavaScript语言中的具体表现形式为对象或数组
var jsonObject = {"name":"admin","text":"sssr" } -
JSON对象与JSON字符串转换
javaScript中有JSON对象，该对象用于实现字符串与对象之间的转换。具体以下两个方法：
- JSON.parse()方法：解析JSON字符串并返回对应的值。
- JSON.stringify()方法：返回与指定值对应的JSON字符串.
注：JSON对象在旧版游览器中不被支持
三. Ajax中的JSON
通过Ajax向服务器端提交异步请求时，可以使用JSON格式的请求数据。
<script>// 获取按钮var btn = document.getElementById('btn');// 给按钮添加点击事件btn.addEventListener('click',function(){// 创建XMLHttpRequest核心对象var xhr = createXMLHttpRequest();// 监听服务器xhr.onreadystatechange = function(){// 判断通信状态和响应状态码if(xhr.readyState === 4 && xhr.status === 200){var data = xhr.responseText // 接收JSOn数据格式var json = JSON.parse(data) // 转为字符串格式console.log(json);}}// 与服务器建立连接xhr.open('post', './server.json');xhr.setRequestHeader('Content-Type', 'application/X-www-form-urlencoded');var obj = {name: "admin",age: 18}// var jsonString = JSON.stringify(obj);// 向服务器发送数据，get方法需为NULLxhr.send('name='+obj.name + '&age=' + obj.age);})
script>
四. 三级联动案例
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三级联动title>
head>
<body><select id="province">select><select id="city"><option value="">---------option>select><select id="counties"><option value="">---------option>select><script>// 获取省份下拉列表var provinceElement = document.getElementById('province');var citiesElement = document.getElementById('city');var countiesElement = document.getElementById('counties');// 动态获取省份信息var xhr = createXMLHttpRequest();var datasvar citiesxhr.onreadystatechange = function(){if(xhr.readyState === 4 && xhr.status === 200){var response = xhr.responseText;// console.log(response);// 将JSON字符串转换成JSON对象datas = JSON.parse(response);// 遍历数组类型的对象for(var i=0;i<datas.length;i++){var data = datas[i];var province = data.province;// 创建一个optionvar opt = document.createElement('option');opt.setAttribute('value',province);opt.textContent = province;// 将option添加进去provinceElement.appendChild(opt);}}}xhr.open('get','./data/server1.json');xhr.send(null);// 为省份下拉列表绑定事件provinceElement.addEventListener('change',function(){// 将城市下拉列表清空var cityOpts = citiesElement.options;for(var x=1;x<cityOpts.length;x++){citiesElement.removeChild(cityOpts[x]);x--;}// 获取用户选择的省份信息var opts = provinceElement.options; // 获取指定下拉列表所有选项var index = provinceElement.selectedIndex;// 获取被选中的索引值var opt = opts.item(index);var provinceName = opt.getAttribute('value'); // 获取选择的城市的值// 根据省份获取对应城市信息for (var i = 0; i < datas.length; i++) {var data = datas[i];var province = data.province;if(provinceName === province){// 获取对应城市cities = data.cities;// 遍历城市数组for(var j = 0; j<cities.length;j++){var city = cities[j].city;var opt = document.createElement('option');opt.setAttribute('value', city);opt.textContent = city;// 将option添加进去citiesElement.appendChild(opt);}}}})// 为城市下拉列表添加点击事件citiesElement.addEventListener('change',function(){// 将城市下拉列表清空var countOpts = countiesElement.options;for (var x = 1; x < countOpts.length; x++) {countiesElement.removeChild(countOpts[x]);x--;}// 获取用户选择的城市信息var opts = citiesElement.options;var index = citiesElement.selectedIndex;var opt = opts.item(index);var cityName = opt.getAttribute('value');// 根据城市获得区信息for(var i = 0;i<cities.length;i++){var data = cities[i];var city = data.city;// console.log(city);if(cityName === city){counts = data.counties;// 遍历地区数组for (var j = 0; j < counts.length; j++) {var count = counts[j];var opt = document.createElement('option');opt.setAttribute('value', count);opt.textContent = count;// 将option添加进去countiesElement.appendChild(opt);}}}})// 创建XMLHTTPRequest对象function createXMLHttpRequest() {var httpRequest;if (window.XMLHttpRequest) { // 适用于Chrome、Firefox、SafarihttpRequest = new XMLHttpRequest();} else if (window.ActiveXObject) {try {httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); // ie 7以后的版本} catch (e) {try {httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); // ie 6以前的版本} catch (e) { }}}return httpRequest;}script>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！