利用Ajax实现信息获取，使用bootstrap来美化页面，果然很强大。

将bootstrap的API添加到引用。如图程序源码结构：

页面源码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JSON.NET实例</title>

     <!-- 包含头部信息用于适应不同设备 -->

     <meta name="viewport" content="width=device-width, initial-scale=1"/>

     <!-- 包含 bootstrap 样式表 -->

     <link rel="stylesheet" href="Scripts/css/bootstrap.min.css"/>

 </head>

 <body>

     <div class="container">

     <h2>信息</h2>

         <div class="table-responsive">

             <table class="table table-striped table-bordered" >

                 <thead>

                     <tr>

                         <th>

                             用户名

                         </th>

                         <th>

                             年龄

                         </th>

                         <th>

                             性别

                         </th>

                         <th>

                             国籍

                         </th>

                         <th>

                             电子邮箱

                         </th>

                     </tr>

                 </thead>

                 <tbody id="personBody">

                 </tbody>

             </table>

         </div>

     </div>

     <script src="Scripts/js/jquery-2.1.1.min.js" type="text/javascript"></script>

     <script src="Scripts/js/bootstrap.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $.getJSON("PersonHandler.ashx", function (data, status) {

                 if (status == "success") {

                     $.each(data, function (index, item) {

                         var beginTag = "<tr><td>";

                         var endTag = "</td></tr>";

                         var tag = "</td><td>";

                         $("#personBody").append($(beginTag + item.Name + tag + item.Age + tag + item.Gender + tag

                         + item.Country + tag + item.Email + endTag));

                     });

                 }

             });

         });

     </script>

 </body>

 </html>

效果图：

Demo3使用bootstrap的更多相关文章

  1. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  2. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  3. bootstrap的datepicker使用（1.将默认的英文设置为中文2.选择日月年的时候记录之前的操作）

    参考网页    bootstrap datepicker 属性设置 以及方法和事件 1.如何将bootstrap的datepicker默认的英文设置为中文 第一步,新建一个js文件(bootstrap ...

  4. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  5. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  6. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  7. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  8. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

随机推荐

  1. Codeforces Round #360 (Div. 2) C D E

    每次AB秒出 到了C难度陡然上升...翻译都弄不懂... C 给出一张图 找出两个点的覆盖集(覆盖集是指这图中每条边都有至少一个点在这个点集里面) 并且两个点集没有交集 英文很难看懂...就是二分图的 ...

  2. 一些站点使用的服务器软件、js 框架大收集 [ 整理中 ]

    Chrome 的扩展应用 ChromeSnifferPlus ( 开源中国地址:http://www.oschina.net/p/chromesnifferplus,GitHub 地址:https:/ ...

  3. jpush极光推送知识点总结

    1.jpushClient.sendPush(pushpayLoad):是发送推送的主要方法 2.pushpayload是具体推送消息.推送对象范围的封装 3.jpushClient.sendPush ...

  4. skype msnLite 静态路由

    连接vpn后防止skype和msn重复登陆 route -p add ip网段 mask 子网掩码 本地网管 skyperoute -p add 91.0.0.0 mask 255.0.0.0 192 ...

  5. Rails--bundle exec rake db:migrate

    --新建表: def up create_table :[TABLE_NAME] do |t| t.column :[NUM], :integer t.column :[NAME], :string ...

  6. lvs简单配置

    负载均衡服务器将会用到两块网卡,eth0为公网地址(此处将局域网ip作为公网地址),IP地址为192.168.1.104,eth0:1,IP地址为192.168.2.1在负载均衡器上添加一个ip别名, ...

  7. Listener-监听器+ServletContext+ApplicationContext

    参考资料 ServletContext和ApplicationContext有什么区别 ServletContext:是web容器的东西, 一个webapp一个, 比session作用范围要大, 从中 ...

  8. 【转】设计模式（三）建造者模式Builder（创建型）

    (http://blog.csdn.net/hguisu/article/details/7518060) 1. 概述 在软件开发的过程中,当遇到一个"复杂的对象"的创建工作,该对 ...

  9. （转）web网站架构演变

    浅谈web网站架构演变过程   前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管 ...

  10. Scrum 的相关概念

    Scrum 的相关概念 4.1   Scrum 的起源 Scrum 是一种灵活的敏捷软件开发管理过程,这个名词来源于英式橄榄球.Scrum方法由Ken Schwaber和Jeff Sutherland ...