日星网
搜索

记录日常点点滴滴，欢迎来到我的小站。

0%

jQuery 获取JSON数据 两种方法

发表于 更新于 分类于

使用jquery从后台获取JSON数据，显示

知识点：

  1. 使用了require JS 框架

  2. 用Jquery的两种方法获取后台数据

1）ajax 方法，传回的都是json数据

2）getJSON, 直接封装了一些参数{command : GetRegsiterJsonData}

代码：

test.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<head>
<title>MyWebProject</title>
<meta charset="utf-8" />
<link type="text/css" href="./lib/css/jquery-ui-1.8.19.custom.css"
        rel="stylesheet" />
<script type="text/javascript" src="./lib/js/require-jquery.js"
        data-main="js/main">
        </script>

</head>
<body>
<label id="dataArea"></label>
</body>
</html>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var loadJS = [
              "jquery",
              ];

require.config({
        baseUrl : "lib/js/",
        paths: {
                "jquery": "jquery-1.8.3.min",
        }
});


//Function In main
require(loadJS, LoadData("./Test"));


//CallWebTrendsUri
function LoadData(url){
        $(function(){
                $(document).ready(function(){
                        jQuery.ajax({
                                type:"GET",
                                url: url + "?command=GetRegsiterJsonData",
                                dataType:"json",
                                global:false,
                                success: function(data){
                                        var jsonData = "1. 用统一的ajax方法<br/>";
                                        var personList = data.personList;
                                        for(var i=0; i<personList.length; i++){
                                                var name = personList[i].name;
                                                var age = personList[i].age;
                                                jsonData += "name: " + name + ", age: " + age + "<br/>";  
                                        }
                                        $("#dataArea").html(jsonData + "<br/>");  
                                }
                        });
                       
                        $.getJSON(url,
                                        {command: "GetRegsiterJsonData"},
                                        function(data){
                                                var jsonData = "2. 用getJSON方法<br/>";
                                                var personList = data.personList;
                                                $.each(personList, function(i){
                                                        var name = personList[i].name;
                                                        var age = personList[i].age;
                                                        jsonData += "name: " + name + ", age: " + age + "<br/>";  
                                                });
                                                $("#dataArea").html($("#dataArea").html() + jsonData);  
                                        });   
                });
        });
};

JSON数据如下：

1
{"time":"2012/12/16","personList":[{"name":"Jeremy","age":20},{"name":"Tom","age":43},{"name":"Mary","age":33}]}