【 Ajax 】 json 数据格式

tech2026-08-14 6

一、JSON ？

JSON：JS Object Notation，JS 对象表示法，采用完全独立于语言的文本格式，可以在多种语言之间自由转换，是一种非常流行的数据交换语言。

语法结构：

1."名称/值（A collection of name/value pairs）,键值对组合；"

2.“值的有序列表（An ordered list of values）”，数组；

JSON 文件：以.json为后缀名的文件；

case:

[ { "type":"武侠", "name":[ "倚天屠龙","仗剑天涯","孤独求败"] }, { "type":"修仙", "name":[ "一剑开天","绝世魔尊","长生道"] } ]

二、JavaScript 中的 JSON

1.JavaScript && JSON

JSON 是语法，它基于 JavaScript 语法，与 JavaScript 不同，JavaScript isn’t JSON ， JSON isn’t JavaScript。

JavaScript 类型JSON不同点对象 && 数组属性名称必须由双引号括起来的字符串，最后一个属性没有逗号数值禁止出现前导零字符串有限的字符可被转义

2.JSON 字符串 && JSON 对象

JSON 字符串：内容符合JSON格式的要求，类型是字符串：

var jsonString = "'name':'张三'";

JSON 对象：JavaScript 的具体表现；

var jsonString = { name:"张三" }; var jsonArr = [1,2,3];

三、JSON 对象 && JSON 字符串转换

JSON 字符串

var jsonString = "{'name':'张三'}";

将 JSON 字符串转换为 JSON 对象

var jsonObject = JSON.parser(jsonString);

将 JSON 对象转换为 JSON 字符串

var jsonStrings = JSON.stringify(jsonObject);

四、【Ajax 】中的 JSON

Let’s Coding：

构造JSON 数据：

五、【Ajax 】中的 XML

XML : 自定义标记语言，同html但是其中的标签是自己定义的。

Let’s Coding： <?xml version="1.0" encoding="utf-8"> <body> <name>帝天</name> </body> 访问 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ajax 中的 JSON</title> </head> <body> <button id="btn">Req</button> <script src="../../Public/xhr.js"></script> <script> var btn = document.getElementById('btn'); btn.addEventListener('click',function(){ // 创建 XHR 核心对象 var xhr = createXMLHttpRequest() // xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.staus ===200){ // 响应成功 console.log(xhr.responseText); // 输出 data.json 文件中的字符 var data = xhr.responseXML; // 不同点 var json = JSON.parse(data); console.log(json) // 输出 json 格式的对象 } } // post 方式 xhr.open('post','../../Public/data.xml'); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(null); }); </script> </body> </html>

六、【Ajax 】实现【三级联动案例】

三级联动效果图：

实现思路：

1.首先实现一个二级联动； 2.再在这个二级联动基础上在实现一个二级联动；

提前准备好 data.json 文件的数据,：

[ { "province": "河北省", "cities": [ { "city":"邢台市", "counties": [ "羊范镇","龙乡镇","朱庄镇" ] }, { "city":"邯郸市", "counties": [ "灵泉镇","古龙镇","婀娜镇" ] }, { "city":"保定市", "counties": [ "莲池区","东金庄乡","枣庄" ] } ] }, { "province": "河南省", "cities": [ { "city":"大金市", "counties": [ "阿龙镇","小麦镇","德邦镇" ] }, { "city":"小金市", "counties": [ "灵镇","龙镇","婀镇" ] }, { "city":"奥斯市", "counties": [ "池区","东金乡","枣庄市" ] } ] }, { "province": "湖北省", "cities": [ { "city":"邢市", "counties": [ "羊镇","啊镇","朱镇" ] }, { "city":"郸市", "counties": [ "我镇","你镇","他镇" ] }, { "city":"保市", "counties": [ "你区","我区","他区" ] } ] } ]

1.实现第一个二级联动：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>三级联动</title> <style> body{ width:100vw; height:100vw; overflow:hidden; background-image:linear-gradient(60deg,#111111 0%,#222222 50%,#111111 100%); } select{ display:block; width:200px; height:50px; border-radius:10px; margin:100px auto; background-image:linear-gradient(60deg,#353 0%,#464 50%,#353 100%); } </style> </head> <body>    <select id="province"> <option value="">----</option> </select> <select id="city"> <option value="">----</option> </select> <select id="county"> <option value="">----</option> </select> <script> var provinceEle = document.getElementById('province'); // 获取 province 元素 var cityEle = document.getElementById('city'); // 获取 city 元素 var countyEle = document.getElementById('county'); // 获取 county 元素 var datas; // 存放所有数据 // Ajax 异步实现 var xhr = createXMLHttpRequest(); // 创建 XMLHttpRequest() 对象 xhr.onreadystatechange = function (){ if ( xhr.readyState === 4 && xhr.status === 200 ){ // 服务器正确响应 var response = xhr.responseText; // 获取响应数据 datas = JSON.parse(response); // json数据格式转化 loopAdd(provinceEle,datas,"province"); // 循环添加省份 } } xhr.open('get','data.json'); // 返回 data.json 中数据 xhr.send(null); // 发送 null 至服务器 // 第一个二级联动实现：省份下拉列表绑定 change 事件； provinceEle.addEventListener('change',function(){ clear(cityEle); // 清空城市列表 try{ loopAdd(cityEle,loopCompare(datas,getEle(provinceEle),"province").cities,"city");// 尝试添加城市列表 }catch(e){console.log(e);} }); // 获取指定 select 下被选中的option // ele : 要查元素的父级元素； function getEle(ele){ return ele.options[ele.selectedIndex].getAttribute('value'); // options 获取所有 option 元素; selectIndex 获取当前被选中 option 索引; getAttribute 获取指定属性值 }; // 清空城市列表 function clearCity(){ for (var i=1; i<cityEle.options.length;i+=0){cityEle.removeChild(cityEle.options[i]);}; // 此处有坑：length 会动态的改变,会导致元素删除不全； }; // 清空目标列表 // list : 目标 list 列表; function clear(list){ for ( var i=1;i<list.options.length;i+=0){list.removeChild(list.options[i]);}; // 此处有坑：length 会动态的改变,会导致元素删除不全； } // 添加 option 元素 // ele : 要添加元素的父元素； // text: 要添加元素的文本； function addOption(ele,text){ var opt = document.createElement('option'); opt.setAttribute('value',text); opt.textContent = text; ele.appendChild(opt); } // 循环比较 // list : 要比较的数组; // val : 被选中的值; // typies : 要添加元素的类型;仅限(province、city、county); function loopCompare(list,val,typies){ switch(typies){ case "province": for( var i=0;i<list.length;i++){if( list[i].province === val){return list[i];}}; case "city": for( var i=0;i<list.length;i++){if( list[i].city === val){return list[i];}};   default: console.log('Nothing...'); } } // 循环添加 // entity : 你要将元素添加到那个元素里，即要添加元素的父元素; // list : 将要遍历的数据; // typies : 要添加元素的类型;仅限(province、city、county); function loopAdd(entity,list,typies){ switch(typies){ case "province": for( var i=0;i<list.length;i++){addOption(entity,list[i].province) ;}break; case "city": for( var i=0;i<list.length;i++){addOption(entity,list[i].city) ;}break; case "county": for( var i=0;i<list.length;i++){ console.log(list[i]);addOption(entity,list[i]) ;}break; default: console.log('Nothing...'); } } // 创建 XMLHTTPRequest 对象 function createXMLHttpRequest ( ) { var httpRequest; // 现在主流浏览器 if ( window.XMLHttpRequest ) { httpRequest = new XMLHttpRequest(); // IE 浏览器 }else if ( window.ActiveXObject ){ try { // 兼容 IE 7 及以上版本 httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch ( e ) { try { // 兼容 IE 6 及以下版本 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } return httpRequest; }; </script> </body> </html>

2.实现第一个二级联动：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>三级联动</title> <style> body{ width:100vw; height:100vw; overflow:hidden; background-image:linear-gradient(60deg,#111111 0%,#222222 50%,#111111 100%); } select{ display:block; width:200px; height:50px; border-radius:10px; margin:100px auto; background-image:linear-gradient(60deg,#353 0%,#464 50%,#353 100%); } </style> </head> <body>    <select id="province"> <option value="">----</option> </select> <select id="city"> <option value="">----</option> </select> <select id="county"> <option value="">----</option> </select> <script> var provinceEle = document.getElementById('province'); // 获取 province 元素 var cityEle = document.getElementById('city'); // 获取 city 元素 var countyEle = document.getElementById('county'); // 获取 county 元素 var datas; // 存放所有数据 // Ajax 异步实现 var xhr = createXMLHttpRequest(); // 创建 XMLHttpRequest() 对象 xhr.onreadystatechange = function (){ if ( xhr.readyState === 4 && xhr.status === 200 ){ // 服务器正确响应 var response = xhr.responseText; // 获取响应数据 datas = JSON.parse(response); // json数据格式转化 loopAdd(provinceEle,datas,"province"); // 循环添加省份 } } xhr.open('get','data.json'); // 返回 data.json 中数据 xhr.send(null); // 发送 null 至服务器 // 省份下拉列表绑定 change 事件； provinceEle.addEventListener('change',function(){ clear(cityEle); // 清空城市列表 try{ loopAdd(cityEle,loopCompare(datas,getEle(provinceEle),"province").cities,"city");// 尝试添加城市列表 }catch(e){console.log(e);} }); // 第二个二级联动实现：城市下拉列表绑定 change 事件； cityEle.addEventListener('change',function(){ clear(countyEle); // 清空乡镇 try{ loopAdd(countyEle,loopCompare(loopCompare(datas,getEle(provinceEle),"province").cities,getEle(cityEle),"city").counties,"county"); }catch(e){console.log(e);} }); // 获取指定 select 下被选中的option // ele : 要查元素的父级元素； function getEle(ele){ return ele.options[ele.selectedIndex].getAttribute('value'); // options 获取所有 option 元素; selectIndex 获取当前被选中 option 索引; getAttribute 获取指定属性值 }; // 清空城市列表 function clearCity(){ for (var i=1; i<cityEle.options.length;i+=0){cityEle.removeChild(cityEle.options[i]);}; // 此处有坑：length 会动态的改变,会导致元素删除不全； }; // 清空目标列表 // list : 目标 list 列表; function clear(list){ for ( var i=1;i<list.options.length;i+=0){list.removeChild(list.options[i]);}; // 此处有坑：length 会动态的改变,会导致元素删除不全； } // 添加 option 元素 // ele : 要添加元素的父元素； // text: 要添加元素的文本； function addOption(ele,text){ var opt = document.createElement('option'); opt.setAttribute('value',text); opt.textContent = text; ele.appendChild(opt); } // 循环比较 // list : 要比较的数组; // val : 被选中的值; // typies : 要添加元素的类型;仅限(province、city、county); function loopCompare(list,val,typies){ switch(typies){ case "province": for( var i=0;i<list.length;i++){if( list[i].province === val){return list[i];}}; case "city": for( var i=0;i<list.length;i++){if( list[i].city === val){return list[i];}};   default: console.log('Nothing...'); } } // 循环添加 // entity : 你要将元素添加到那个元素里，即要添加元素的父元素; // list : 将要遍历的数据; // typies : 要添加元素的类型;仅限(province、city、county); function loopAdd(entity,list,typies){ switch(typies){ case "province": for( var i=0;i<list.length;i++){addOption(entity,list[i].province) ;}break; case "city": for( var i=0;i<list.length;i++){addOption(entity,list[i].city) ;}break; case "county": for( var i=0;i<list.length;i++){ console.log(list[i]);addOption(entity,list[i]) ;}break; default: console.log('Nothing...'); } } // 创建 XMLHTTPRequest 对象 function createXMLHttpRequest ( ) { var httpRequest; // 现在主流浏览器 if ( window.XMLHttpRequest ) { httpRequest = new XMLHttpRequest(); // IE 浏览器 }else if ( window.ActiveXObject ){ try { // 兼容 IE 7 及以上版本 httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch ( e ) { try { // 兼容 IE 6 及以下版本 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } return httpRequest; }; </script> </body> </html>

最新回复(0)