|
阅读：6907回复：4
JSON 教程JSON 实例,JSON 数组 { "sites": [ { "name":"菜鸟教程" , "url":"www.runoob.com" }, //数据间用逗号间隔 { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ] } JSON 实例2 var JSONObject= { "name":"菜鸟教程", "url":"www.runoob.com", "slogan":"学的不仅是技术，更是梦想！" }; JSON 实例3 { "name":"网站", "num":3, "sites":[ "Google", "Runoob", "Taobao" ] } |
|
|
沙发#
发布于：2020-02-14 23:17
JSON.parse() 接收服务器数据时需要用
在接收服务器数据时一般是字符串。 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。 //尤其适用于SESSION缓存数据有效 JSON 解析实例 <p id="demo"></p> <script> var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }'); document.getElementById("demo").innerHTML = obj.name + "：" + obj.site; </script> 从服务端接收 JSON 数据 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; } }; xmlhttp.open("GET", "/try/ajax/json_demo.txt", true); xmlhttp.send(); 从服务端接收数组的 JSON 数据 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; } }; xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true); xmlhttp.send(); 异常 解析数据 JSON 不能存储 Date 对象。 如果你需要存储 Date 对象，需要将其转换为字符串。 之后再将字符串转换为 Date 对象。 var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com" }'; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate); document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate; 实例 var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com" }'; var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value; } }); document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate; 浏览器支持 主流浏览器都支持 JSON.parse() 函数：
|
|
|
地板#
发布于：2020-02-15 22:56
JSON 使用 把 JSON 文本转换为 JavaScript 对象 创建包含 JSON 语法的 JavaScript 字符串： var txt = '{ "sites" : [ ' + '{ "name":"菜鸟教程" , "url":"www.runoob.com" },' + '{ "name":"google" , "url":"www.google.com" },' + '{ "name":"微博" , "url":"www.weibo.com" } ] }'; 由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。 eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误： var obj = eval ("(" + txt + ")"); 在网页中使用 JavaScript 对象： 实例 <h2>从 JSON 字符串中创建对象</h2><p> 网站名: <span id="name"></span> 网站地址: <span id="url"></span> </p> <script>var txt = '{ "sites" : [ ' +'{ "name":"菜鸟教程" , "url":"www.runoob.com" }, ' +'{ "name":"google" , "url":"www.google.com" }, ' +'{ "name":"微博" , "url":"www.weibo.com" } ]}'; var obj = eval ("(" + txt + ")"); document.getElementById("name").innerHTML=obj.sites[0].name document.getElementById("url").innerHTML=obj.sites[0].url </script> |
|
|
4楼#
发布于：2020-02-15 23:04
JSONP Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 JSONP 应用 1. 服务端 JSONP 格式数据 如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。 假设客户期望返回数据：["customername1","customername2"]。 真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。 服务端文件 jsonp.php 代码为： <?php header('Content-type: application/json'); //获取回调函数名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据 $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo $jsoncallback . "(" . $json_data . ")"; ?> 2. 客户端实现 callbackFunction 函数 <div id="divCustomers"></div> <script type="text/javascript"> function callbackFunction(result, methodName) { var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; } </script> <script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> jQuery 使用 JSONP 以上代码可以使用 jQuery 代码实例： <div id="divCustomers"></div> <script> $.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>'; for(var i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>'; } html += '</ul>'; $('#divCustomers').html(html); }); </script> |
|
