利用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. Apache Spark源码走读之15 -- Standalone部署模式下的容错性分析

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本文就standalone部署方式下的容错性问题做比较细致的分析,主要回答standalone部署方式下的包含哪些主要节点,当某一类节点出现问题时,系统是如 ...

  2. Linux改变文件或目录的访问权限命令

    使用  ll  或  ls -l 指令时 第一列会显示出目录下文件的权限 例如∶ -rw-r-r- 横线代表空许可.r代表只读,w代表写,x代表可执行.注意这里共有10个位置.第一个字符指定了文件类型 ...

  3. SharedPreferences封装类SPUtils

    import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; import java.uti ...

  4. Front-end Developer Interview Questions

    Front-end-Developer-Interview-Questions A list of helpful front-end related questions you can use to ...

  5. Smarty 配置文件的读取

    http://www.cnblogs.com/gbyukg/archive/2012/06/12/2539067.html

  6. jdk Tomcat配置

    安装Tomcat需要先安装JDKJDK安装JDK安装会有两次,两次不能再同一目录 你可以新建两个文件夹 JDK JRE 第一次安装在JDK 第二次在JRE在我的电脑右键属性 高级系统设置 环境变量 系 ...

  7. php://input，$_POST，$HTTP_RAW_POST_DATA区别

    我们先来看两个demo 例子:php://input 代码如下   post.php 代码如下   例子:$_post 代码如下   welcome.php 代码如下   再来看$GLOBALS [& ...

  8. epoll 应用

    /*  * test_bittube.cpp  *  *  Created on: 2015年7月13日  *      Author: ting.guit  */ #include <bind ...

  9. freemarker 自定义标签

    1.编写标签类 package com.pccw.business.fnd.common.filegen; import java.io.IOException; import java.io.Wri ...

  10. java正则表达式取括号里面的内容

    public static String changeCompName(String compName){ String NewCompName=""; //cm1230NHL6X ...