JQuery UI获取JSON数据

最近在学习用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的设计内容：

<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>

tbody用于显示json数据

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

[

{

"name":"王天",

"sex":"男",

"years":"12",

"email":"[email protected]"

},

{

"name":"小文",

"sex":"女",

"years":"21",

"email":"[email protected]"

}

]

接下来就是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中
        });
    }

这样就能获取json传过来的数据并展示到前台表格里了