JQuery UI获取JSON数据

浏览数：41 / 时间：2015年06月09日

最近在学习用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传过来的数据并展示到前台表格里了

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JQuery UI获取JSON数据