利用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. 配置SMarty解析

    在 common/main.php中配置 View 组件 'view' => [ 'renderers' => [ 'tpl' => [ 'class' => 'yii\sma ...

  2. JBoss错误

    jboss进程在启动时碰到Address already in use: JVM_Bind /0.0.0.0:8080错误. 这个错误的含义是8080端口被占用了. 解决方法: 方法1: 开始--运行 ...

  3. hibernate将本地SQL查询结果封装成对象

    hibernate将本地SQL查询结果封装成对象 不知道大家有没有碰过这种情况,迫于很多情况只能用native SQL来查询(如:复杂统计等),然而使用native查询后,结果会被放到object里, ...

  4. twitter storm源码走读之6 -- Trident Topology执行过程分析

    欢迎转载,转载请注明出处,徽沪一郎. TridentTopology是storm提供的高层使用接口,常见的一些SQL中的操作在tridenttopology提供的api中都有类似的影射.关于Tride ...

  5. python 动态加载module、class、function

    python作为一种动态解释型语言,在实现各种框架方面具有很大的灵活性. 最近在研究python web框架,发现各种框架中需要显示的定义各种路由和Handler的映射,如果想要实现并维护复杂的web ...

  6. textView截取字符串-医生工作台1期

    textfield截取字符串 ios7 会崩溃 解: 之前的写法是这样的 正确的写法:   先判断markedTextRange是否为nil,   markedTextRange这个属性是啥意思呢 表 ...

  7. C++ char*，const char*，string的相互转换

    1. string转const char* string s ="abc";constchar* c_s = s.c_str(); 2. const char*转string   ...

  8. Docker Device Mapper 使用 direct-lvm

      一.Device Mapper: loop-lvm 默认 CentOS7 下 Docker 使用的 Device Mapper 设备默认使用 loopback 设备,后端为自动生成的稀疏文件,如下 ...

  9. 一次性搞清楚equals和hashCode

    前言 在程序设计中,有很多的“公约”,遵守约定去实现你的代码,会让你避开很多坑,这些公约是前人总结出来的设计规范. Object类是Java中的万类之祖,其中,equals和hashCode是2个非常 ...

  10. 窗口类型（Widget, Window, Dialog, Desktop, SubWindow等等）

    http://doc.qt.io/qt-5/qwidget.html#windowFlags-prop http://doc.qt.io/qt-5/qtwidgets-widgets-windowfl ...