JQuery UI获取JSON数据

页面导航:首页 > 网络编程 > JavaScript > JQuery UI获取JSON数据

JQuery UI获取JSON数据

来源: 作者: 时间:2016-02-05 11:06 【

最近在学习用JQuery UI开发一个界面,这是javascript的一个框架,功能强大,界面漂亮。 首先要下载JQuery UI的包,引入里面的文件:然后是table的设计内容:姓名性别年龄邮箱

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

首先要JQuery UI的包,引入里面的文件:


<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
然后是table的设计内容:

姓名 性别 年龄 邮箱

tbody用于显示json数据

另外我们得准备一个json文件UserInfo.json(和网页放在同级目录下),内容如下:

[

{

"name":"王天",

"sex":"男",

"years":"12",

"email":""

},

{

"name":"小文",

"sex":"女",

"years":"21",

"email":""

}

]


接下来就是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 += "";  
                strHTML += ""+Info["name"]+"";  
                strHTML += ""+Info["sex"]+"";  
                strHTML += ""+Info["years"]+"";  
                strHTML += ""+Info["email"]+"";  
                strHTML += "";  
            });  
            $("#Data").(strHTML);//显示到tbody中  
        });  
    }

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




Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<