1. 程式人生 > >JSONP詳解(一)基本概念和案例

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;