JQuery UI获取JSON数据

最新推荐文章于 2025-11-16 12:55:48 发布

原创最新推荐文章于 2025-11-16 12:55:48 发布 · 487 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何使用JQueryUI框架创建界面，并通过JavaScript从JSON文件获取数据进行展示。首先，介绍了JQueryUI的基本引入方式，然后详细说明了如何设计表格样式和布局。接着，解释了如何准备JSON数据文件，并展示了获取和显示数据的JavaScript代码流程。最后，通过实例展示了整个过程，使读者能够快速上手。

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

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

[html] view plain copy print ?

<link href="jquery-ui.css" rel="stylesheet">
<script src="external/jquery/jquery.js"></script>
<script src="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 plain copy print ?

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

<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":"hello@gmail.com"

{

"name":"小文",

"sex":"女",

"years":"21",

"email":"xiaowen@qq.com"

}

]

接下来就是jQuery代码了：

[javascript] view plain copy print ?

$(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中
});
}

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