JSONP詳解(一)基本概念和案例
需要準備的工具:
dreamweaver cs 6,或者其他版本,或者其他前端開發工具hbuilder,sublime等
tomcat 8.0或者其他版本。
jQuery 1.11.1 或者其他版本
eclipse Oxygen 或其他版本
JSON(JavaScript Object Notation, JS 物件標記) 是一種輕量級的資料交換格式。
https://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
<body>
<div id="name"></div>
<script language="javascript">
var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
}
document.getElementById("name").innerHTML=person.age; 在網頁上顯示年齡
</script>
// 描述一個人
var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
}
// 獲取這個人的資訊
var personAge = person.Age;
// 描述幾個人
var members = [
{
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": "John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry",
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
// 讀取其中John的公司名稱
var johnsCompany = members[1].Company;
// 描述一次會議
var conference = {
"Conference": "Future Marketing",
"Date": "2012-6-1",
"Address": "Beijing",
"Members":
[
{
"Name": "Bob",
"Age": 32,
"Company": "IBM",
"Engineer": true
},
{
"Name": "John",
"Age": 20,
"Company": "Oracle",
"Engineer": false
},
{
"Name": "Henry",
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
}
// 讀取參會者Henry是否工程師
var henryIsAnEngineer = conference.Members[2].Engineer;