利用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. 【iCore、iCore2、iBoard例程】【异步FIFO跨时钟域通信（通过ARM 读FPGA FIFO）】

    欢迎访问电子工程师学堂,以便了解更多内容:http://www.eeschool.org 一.本实验基于iCore2 完成,通过简单改动,即可用在 iCore 核心板.iBoard 电子学堂上. iC ...

  2. Spring3.1 Cache注解

    依赖jar包: <!-- redis --> <dependency> <groupId>org.springframework.data</groupId& ...

  3. angJs使选中的li背景颜色不同

    <!doctype html><html><head><meta charset="UTF-8"><title>test ...

  4. Gitolite配置管理和GIT基本操作

    简述公司版gitolite的项目配置与管理 1. 基于秘钥对的管理 1.1 客户端(需要访问代码库的机器)生成秘钥对,采用RSA加密ssh-keygen -t rsa -f path_to_store ...

  5. 《编写可维护的 Javascript》读书笔记（附录 A 部分）：Javascript 编码风格指南（1）原始值

    记录一下比较有用的编码规范(该指南是基于 Java 语言编码规范和 Javascript 编程规范,同时结合作者 Nicholos Zakas 的个人经验和喜好). 一些关于格式(包括缩进.行的长度. ...

  6. mysql insert一条记录后怎样返回创建记录的主键id,last_insert_id(),selectkey

    mysql插入数据后返回自增ID的方法 mysql和oracle插入的时候有一个很大的区别是,oracle支持序列做id,mysql本身有一个列可以做自增长字段,mysql在插入一条数据后,如何能获得 ...

  7. mysql备份恢复

    备份命令: mysqldump -u root -p --opt 数据库名 > /data/数据库文件名.sql 恢复命令: mysql -u root -p 数据库名</data/恢复的 ...

  8. 一个高度压缩的bit位图字典的实现

    微软实现的字典功能简单方便,出于全局性考虑,其内部实现比较复杂,在对海量数据处理时,仅仅存放一个对象地址就将占据32个bit(64位机器中占据64个bit),而且其内部通过int[]来处理hash桶, ...

  9. C++ Windows 上简单的非阻塞Select模型

    说明:当客户端连接数超过64个的时候,每次最多select64个,但每一帧可以select多次,理论上可以突破fd个数的限制 .h #ifndef _MODULE_SELECT_H_ #define ...

  10. php--在apache上配制rewrite重写

    配置步骤: 第一步:找到apache的配置文件httpd.conf(文件在conf目录下) 第二步:你首先必须得让服务器支持mod_rewrite,如果你使用的是虚拟主机,请事先询问你的主机提供商. ...