W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

JSON 函数文件



JSON常见的用法是从Web服务器读取数据,并在网页中显示数据.

本章将通过4个简单的步骤教你如何使用函数文件来读取JSON数据.


JSON 实例

本实例从 myTutorials.js 中读取菜单,并在网页中显示菜单:

JSON Example

<div id="id01"></div>

<script>
function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

<script src="myTutorials.js"></script>
尝试一下 »

实例解析:

1: 创建一个对象数组。

使用 数组源文本 来声明一个 对象数组

给每个对象赋两个属性: displayurl

命名数组 myArray

myArray

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.wang/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.wang/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.wang/css/default.asp"
}
]

2: 创建一个JavaScript函数来显示数组。

创建一个循环数组对象的函数 myFunction() ,并将内容显示为HTML链接:

myFunction()

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}

使用 myArray 作为参数调用 myFunction() 函数:

Example

myFunction(myArray);
尝试一下 »

3: 使用数组源文本做参数(而不是数组变量)

使用 源文本 作为参数调用 myFunction()函数:

Calling myFunction()

myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.wang/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.wang/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.wang/css/default.asp"
}
]);
尝试一下 »

4: 将函数调用放在外部的js文件中

将函数调用放到名为 myTutorials.js 的文件中:

myTutorials.js

myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.wang/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.wang/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.wang/css/default.asp"
}
]);

将外部脚本添加到您的页面中(而不是函数调用)

Add External Script

<script src="myTutorials.js"></script>
尝试一下 »