JSON: JSON 用法-CSDN博客

ylbtech-JSON: JSON 用法

1. JSON Object creation in JavaScript返回顶部

1、

<!DOCTYPE html>
<html>
<body>
    <h2>JSON Object creation in JavaScript</h2>
    <p>
        Name:<span id="jname"></span><br />
        Age:<span id="jage"></span><br />
        Address:<span id="jaddress"></span><br />
        Phone:<span id="jphone"></span><br />
    </p>
    <script>
        var JSONObject = {
            "name": "John Johnson",
            "street": "Oslo West 555",
            "age": 33,
            "phone":"555 1234567"
        };
        document.getElementById("jname").innerHTML = JSONObject.name;
        document.getElementById("jage").innerHTML = JSONObject.age;
        document.getElementById("jaddress").innerHTML = JSONObject.street;
        document.getElementById("jphone").innerHTML = JSONObject.phone;
    </script>
</body>
</html>

View Code

2、运行结果

JSON Object creation in JavaScript

Name:John Johnson
Age:33
Address:Oslo West 555
Phone:555 1234567

3、

2. Create Object from JSON String返回顶部

1、

<!DOCTYPE html>
<html>
<body>
    <h2>Create Object from JSON String</h2>
    <p>First Name:<span id="fname"></span></p>
    <script>
        var employee = [
     { "firstName": "John", "lastName": "Doe" },
     { "firstName": "Anna", "lastName": "Smith" },
     { "firstName": "Peter", "lastName": "Jones" }
        ];
        employee[1].firstName = "Jonatan";
        document.getElementById("fname").innerHTML = employee[1].firstName;
    </script>
</body>
</html>

View Code

2、运行结果

Create Object from JSON String

First Name:Jonatan

3、

3. 从 JSON 字符串中创建对象返回顶部

1、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>示例</title>
</head>
<body>
    <h2>从 JSON 字符串中创建对象</h2>
    <p>
        名：<span id="fname"></span><br />
        姓：<span id="lname"></span><br />
    </p>
    <script>
        var txt = '{"employees":[' + '{"firstName":"John","lastName":"Doe"}'
            + ',{"firstName":"Anna","lastName":"Smith"}'
            + ',{"firstName":"Peter","lastName":"Jones"}]}';

        var obj = eval("(" + txt + ")");

        document.getElementById("fname").innerHTML = obj.employees[1].firstName;
        document.getElementById("lname").innerHTML = obj.employees[1].lastName;
    </script>
<script>
    document.getElementById("fname").innerHTML = obj.employees[1].firstName;
    document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
</body>
</html>

View Code

2、运行结果

从 JSON 字符串中创建对象

名：Anna
姓：Smith

3、

4. JSONP 实例返回顶部

1、

<!DOCTYPE html>
<html>
<head>
    <title>JSONP 实例</title>
</head>
<body>
    <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="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

View Code

2、运行结果

customername1
customername2

3、

5. Create Object from JSON String返回顶部

1、

<!DOCTYPE html>
<html>
<body>
    <h2>Create Object from JSON String</h2>
    <p>
        名：<span id="fname"></span><br />
        姓：<span id="lname"></span><br />
    </p>
    <script>
        var txt = '{"employees":[' + '{"firstName":"John","lastName":"Doe"}'
            + ',{"firstName":"Anna","lastName":"Smith"}'
            + ',{"firstName":"Peter","lastName":"Jones"}]}';

        var obj = JSON.parse(txt);

        document.getElementById("fname").innerHTML = obj.employees[1].firstName;
        document.getElementById("lname").innerHTML = obj.employees[1].lastName;
    </script>
    <script>
    document.getElementById("fname").innerHTML = obj.employees[1].firstName;
    document.getElementById("lname").innerHTML = obj.employees[1].lastName;
    </script>
</body>
</html>

View Code

2、运行结果

Create Object from JSON String

名：Anna
姓：Smith

3、

6. JSNP 实例返回顶部

1、

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JSNP 实例</title>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
    <div id="divCustomers"></div>
    <script>
        $.getJSON("http://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>
</body>
</html>