JQuery UI获取JSON数据

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

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

[html] view plaincopyprint?

1. <linkhref="jquery-ui.css"rel="stylesheet"> 
2. <script src="external/jquery/jquery.js"></script> 
3. <scriptsrc="jquery-ui.js"></script> 

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

然后是table的设计内容：

[html] view plaincopyprint?

1. <tableclass="ui-widget ui-widget-content"border="1px"> 
2.     <thead> 
3.         <trclass="ui-widget-header"> 
4.             <td>姓名</td> 
5.             <td>性别</td> 
6.             <td>年龄</td> 
7.             <td>邮箱</td> 
8.         </tr> 
9.     </thead> 
10.     <tbodyid="Data"> 
11.     </tbody> 
12. </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":"[e-mail]"

},

{

"name":"小文",

"sex":"女",

"years":"21",

"email":"[e-mail]"

}

]

接下来就是jQuery代码了：

[javascript] view plaincopyprint?

1. $(function(){  
2.     $("#showDialog").click(function(){   
3.         getData();//获取json数据   
4.     });   
5.     function getData(){//获取json数据的函数  
6.         $.getJSON("UserInfo.json",function(data){   
7.             $("#Data").empty();//先清空tbody  
8.             var strHTML = "";   
9.             $.each(data,function(InfoIndex,Info){//遍历json里的数据  
10.                 strHTML += "<tr>";   
11.                 strHTML += "<td>"+Info["name"]+"</td>";   
12.                 strHTML += "<td>"+Info["sex"]+"</td>";   
13.                 strHTML += "<td>"+Info["years"]+"</td>";   
14.                 strHTML += "<td>"+Info["email"]+"</td>";   
15.                 strHTML += "</tr>";   
16.             });   
17.             $("#Data").html(strHTML);//显示到tbody中  
18.         });   
19.     } 

$(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传过来的数据并展示到前台表格里了