JQuery UI获取JSON数据

标签：jquery ui   json   javascript   jquery   

    最近在学习用JQuery UI开发一个界面，这是javascript的一个框架，功能强大，界面漂亮。

    首先要下载JQuery UI的包，引入里面的文件：

<link href="jquery-ui.css" rel="stylesheet">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>

<table class="ui-widget ui-widget-content" border="1px">
	<thead>
		<tr class="ui-widget-header">
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
			<td>邮箱</td>
		</tr>
	</thead>
	<tbody id="Data">
	</tbody>
</table>

另外我们得准备一个json文件UserInfo.json（和网页放在同级目录下），内容如下：

[

{

"name":"王天",

"sex":"男",

"years":"12",

"email":"hello@gmail.com"

},

{

"name":"小文",

"sex":"女",

"years":"21",

"email":"xiaowen@qq.com"

}

]

接下来就是jQuery代码了：

$(function(){ 
    $("#showDialog").click(function(){  
        getData();//获取json数据  
    });  
    function getData(){//获取json数据的函数  
        $.getJSON("UserInfo.json",function(data){  
            $("#Data").empty();//先清空tbody  
            var strHTML = "";  
            $.each(data,function(InfoIndex,Info){//遍历json里的数据  
                strHTML += "<tr>";  
                strHTML += "<td>"+Info["name"]+"</td>";  
                strHTML += "<td>"+Info["sex"]+"</td>";  
                strHTML += "<td>"+Info["years"]+"</td>";  
                strHTML += "<td>"+Info["email"]+"</td>";  
                strHTML += "</tr>";  
            });  
            $("#Data").html(strHTML);//显示到tbody中  
        });  
    }

JQuery UI获取JSON数据

标签：jquery ui   json   javascript   jquery   

原文地址：http://blog.csdn.net/kevinxxw/article/details/41692733