溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
JSON 介紹
1、什么是 JSON？
> JSON 指的是 JavaScript 對(duì)象表示法 (JavaScript Object Notation)
> JSON 是一種輕量級(jí)的數(shù)據(jù)交換格式，比 XML 更小、更快、更易解析
> JSON 獨(dú)立于語言的文本格式
> JSON 易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成
JSON 最初來自于 JavaScript，后來被所有的編程語言支持，成為了一種通用的字符串?dāng)?shù)據(jù)格式。
2、JSON 字符串的格式
2-1、“名稱/值”對(duì)的集合，一般理解為對(duì)象。例如：
'{"uid":101, "uname":"Roger", "isMarried":true}'
2-2、值的有序列表，一般理解為數(shù)組。例如：
'[10,20,true,"Roger",{},[] ]'
JSON 格式示例如下：
示例一：
{
"web":[
{"name":"HTML5.0","fullName":"HyperText Markup Language"},
{"name":"CSS3.0","fullName":"Cascading StyleSheets"},
{"name":"JSON","fullName":"JavaScript Object Notation"}
]
}{
"Array": [
1,
2,
3
],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {
"a": "b",
"c": "d"
},
"String": "Hello World"
}示例二：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h3>了解JSON對(duì)象</h3> 用戶名：<span id="uname"></span><br> 年 齡：<span id="uage"></span><br> 博 客：<span id="blog"></span><br> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> <script> var jsonObject= { "name":"Roger", "age":26, "blog":"http://dapengtalk.blog.51cto.com/" }; $('#uname').html(jsonObject.name); $('#uage').html(jsonObject.age); $('#blog').html(jsonObject.blog); </script> </body> </html>
3、JSON 具有以下這些形式
3-1、JSON 字符串 要么是 一個(gè){ }，要么是一個(gè) [ ]
3-2、JSON 中所有的 string 必須使用 "", 包括 key。使用反斜線轉(zhuǎn)義，如：\", \\, \b
3-3、JSON 對(duì)象的 value 只能是 string、number、object、array、true、false、null，不存在 Date 等類型
4、JS 與 JSON 互轉(zhuǎn)
JSON 字符串 => JS 對(duì)象/數(shù)組： var obj = JSON.parse( str );
JS 對(duì)象/數(shù)組 => JSON 字符串： var str = JSON.stringify( obj );
示例代碼一：(JSON 轉(zhuǎn) JS 對(duì)象)
var str = '{"name":"Roger", "age":26}';
var obj = JSON.parse( str);
console.log(obj);結(jié)果：
示例代碼二：（JS 轉(zhuǎn) JSON 字符串）
var jsObj = new Object( ); jsObj.car = "BMW"; jsObj.color = "black"; jsObj.price = 300,000; var jsonStr = JSON.stringify( jsObj ); console.log(jsonStr);
結(jié)果：
5、PHP 與 JSON 互轉(zhuǎn)
PHP 數(shù)組 => JSON 字符串：$str = json_encode( $arr );
JSON 字符串 => PHP數(shù)組： $arr = json_decode( $str );
示例代碼一：（PHP數(shù)組 轉(zhuǎn) JSON字符串）
<?php
header('Content-Type: application/json');
$arr = array('a'=>'apple', 'b'=>'banana', 'c'=>'cherry', 'd'=>'duria');
$str = json_encode( $arr );
echo ($str);結(jié)果：
示例代碼二：（JSON字符串 轉(zhuǎn) PHP數(shù)組）
<?php
header('Content-Type: application/json');
$str = '{"a":"apple","b":"banana","c":"cherry","d":"duria"}';
var_dump( json_decode( $str) );結(jié)果：
JSONP 介紹
1、什么是 JSONP?
JSON with Padding：填充式 JSON，是 JSON 的一種“使用模式”，可以讓網(wǎng)頁(yè)從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)。
我們知道 img、a、link 和 script 都是允許跨域的，JSONP的原理就是利用了這一點(diǎn)
2、JSONP的原理
在客戶端動(dòng)態(tài)的創(chuàng)建一個(gè) script 標(biāo)簽，代替 XHR 對(duì)象，指定 script.src 向服務(wù)器發(fā)起請(qǐng)求，請(qǐng)求的PHP頁(yè)面除了返回需要的數(shù)據(jù)外，還需要填充一個(gè)指定的函數(shù)名。
header('Content-Type: application/javascript');
$json = json_encode($data);
echo $cb . '(' . $json . ')';我們可以模擬一下前面的文字描述
新建一個(gè)HTML 頁(yè)面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">發(fā)起跨域請(qǐng)求</button>
<script>
//回調(diào)函數(shù)
function doResponse(obj){
console.log(obj.uname + obj.age);
};
var btn = document.getElementById('btn');
//點(diǎn)擊按鈕發(fā)起跨域請(qǐng)求
btn.onclick = function(){
//動(dòng)態(tài)創(chuàng)建一個(gè) script 標(biāo)簽
var s = document.createElement('script');
//指定一個(gè) script.src 向服務(wù)器發(fā)起請(qǐng)求
s.src = "http://127.0.0.1:8081/Ajax/4.php?callback=doResponse";
document.body.appendChild(s);
};
</script>
</body>
</html>新建一個(gè)PHP頁(yè)面
<?php
sleep(10); //延時(shí)10s，方便看到效果
header('Content-Type: application/javascript'); //MIME類型設(shè)置成 javascript，因?yàn)閟rc只接受js，
//所以最終要把回調(diào)函數(shù)變成（或者說回調(diào)函數(shù)返回一個(gè)）JSON對(duì)象
$cb = $_REQUEST['callback'];
$data = ['uname'=>'Tom','age'=>20];
$json = json_encode($data); //返回一個(gè)JSON數(shù)據(jù) '{"":"","":20}'
echo $cb.'('.$json.')'; //把JSON數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)看一眼這個(gè)PHP頁(yè)面返回的內(nèi)容，記住要在域名后面加一個(gè)callback 參數(shù)
點(diǎn)擊按鈕以后，控制臺(tái)可以看到，動(dòng)態(tài)生成了一個(gè) script 標(biāo)簽
打開 Network，可以看到這個(gè)實(shí)際發(fā)起的是一個(gè) script 請(qǐng)求，而且響應(yīng)消息是一段 JSON字符串
響應(yīng)消息
查看輸出內(nèi)容，成功拿到了數(shù)據(jù)
3、jQuery 封裝的 JSONP
$.getJSON('http://其它域名/xx.php?callback=?', fn)
HTML頁(yè)面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">跨域請(qǐng)求按鈕</button>
<script src="resources/js/jquery-1.8.3.min.js"></script>
<script>
function doResponse(obj){
console.log(obj.uname + obj.age);
};
$('#btn').click(function(){
$.getJSON('http://127.0.0.1:8081/Ajax/4.php?callback=?',doResponse);
});
</script>
</body>
</html>點(diǎn)擊按鈕，發(fā)起跨域請(qǐng)求，成功的拿到了響應(yīng)數(shù)據(jù)
$.ajax({
url: ' http://其它域名/xx.php',
dataType: 'jsonp',
success: fn
});
HTML 頁(yè)面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">跨域請(qǐng)求按鈕</button>
<script src="resources/js/jquery-1.8.3.min.js"></script>
<script>
function doResponse(obj){
console.log(obj.uname + obj.age);
};
$('#btn').click(function(){
$.ajax({
url:'http://127.0.0.1:8081/Ajax/4.php',
dataType:'jsonp',
success:doResponse
})
});
</script>
</body>
</html>同樣也成功拿到了數(shù)據(jù)，效果截圖同上
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼