利用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. shopnc2014年11版数据库字典

    shopnc_activity 表注释: 活动表 字段 类型 空 默认 注释 activity_id mediumint(9) 否   id activity_title varchar(255) 否 ...

  2. 如何解包，编辑，重新打包boot images

    HOWTO: Unpack, Edit, and Repack Boot Images http://forum.xda-developers.com/showthread.php?t=443994 ...

  3. 【ZZ】 DShader之位移贴图(Displacement Mapping)

    http://www.myexception.cn/other/1397638.html DShader之位移贴图(Displacement Mapping) www.MyException.Cn   ...

  4. 根据设备宽高动态设置View的大小

    得到设备屏幕宽高: WindowManager wManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE); ...

  5. ecshop退款订单原理分析

    ecshop退款订单原理分析 时间:2013-04-12 23:41来源:www.chinab4c.com 作者:ecshop专家 点击:799 咨询qq:760868471咨询旺旺 ecshop退款 ...

  6. Shell-bash中特殊字符汇总[转]

    转自http://www.linuxidc.com/Linux/2015-08/121217.htm 首先举例一个bash脚本 #!/bin/bash file=$1 files=`find / -n ...

  7. Partitioning

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION The simplest scheme f ...

  8. Groovy 在eclipse中的使用

    今天在写Groovy脚本的时候发现一个问题.如下图,element的elementIterator()方法不能智能显示,只能手动输入.而在eclipse中如果类a没有方法a,那么你是用"cl ...

  9. NSUserdefaults 简介以及存储自定义数据类型的方法

    一.了解NSUserDefaults以及它可以直接存储的类型 NSUserDefaults是一个单例,在整个程序中只有一个实例对象,他可以用于数据的永久保存,而且简单实用,这是它可以让数据自由传递的一 ...

  10. Linq&Lumbda (2)

    "Lambda表达式"是一个匿名函数,它可以包含表达式和语句,并且可用于创建委托或表达式树类型. Lambda 运算符: => 该运算符读为"goes to&quo ...