封装好的：ajax.js

 function ajax(url, fnSucc,fnFaild){

     //1【创建】

     if(window.XMLHttpRequest){

         var oAjax = new XMLHttpRequest();

     }else{

         var oAjax = new ActiveXObject("Microsoft.XMLHTTP");

     };

     //2: 【连接】true:表示异步

     oAjax.open('GET',url,true);

     //3：【发送】

     oAjax.send();

     //4：【接受】

     oAjax.onreadystatechange = function(){

         //判断浏览器操作到哪一步

         if(oAjax.readyState == 4){//4：读取完成

             if(oAjax.status==200){

                 fnSucc(oAjax.responseText);

             }else{

                 if(fnFaild){

                     fnFaild(oAjax.status);

                 }

             }

         }

     }

 }

结构与js代码：

 <!DOCTYPE html>

 <html>

 <!--

     作者：702004176@qq.com

     时间：2017-04-10

     描述：

 -->

     <head>

         <meta charset="UTF-8">

         <title>ajax+tab</title>

         <meta name="Description" content="ajax获取json数据，并传入页面" />

         <meta name="author" content="郭菊锋702004176@qq.com"/>

         <script src="ajax.js" type="text/javascript" charset="utf-8"></script>

         <style type="text/css">

             * {

                 margin: 0;

             }

             body {

                 font-family: "微软雅黑";

             }

             li {

                 list-style: none;

             }

             a {

                 text-decoration: none;

                 color: #000;

             }

             a:hover {

                 text-decoration: underline;

                 color: #194090;

             }

             .clearfix:after {

                 content: "";

                 clear: both;

                 display: block;

             }

             .tabWrap {

                 overflow: hidden;

                 width: 611px;

                 margin: 100px auto;

             }

             .ulWrap {

                 padding: 0;

             }

             .ulWrap li {

                 overflow: hidden;

                 float: left;

                 width: 199px;

                 height: 50px;

                 line-height: 50px;

                 margin-right: 3px;

                 text-align: center;

                 color: #DFE9F6;

                 background: #5884CF;

             }

             .ulWrap li.Ahover,

             .ulWrap li:hover {

                 cursor: pointer;

                 background: #194090;

             }

             .tabWrap div {

                 overflow: hidden;

                 width: 591px;

                 padding: 20px;

                 padding: 15px 5px;

                 background: #f1f2f3;

                 border: 1px solid #5884CF;

                 border-top: 0;

             }

             .tabWrap div.hide {

                 display: none;

             }

             .tabWrap div p {

                 margin-top: 10px;

             }

             .tabWrap div img:hover {

                 -webkit-box-shadow: 1px 2px 4px 1px #8aa59f;

                 box-shadow: 1px 2px 4px 1px #8aa59f;

             }

         </style>

     </head>

     <body>

         <div class="tabWrap" id="tabWrap">

             <ul class="ulWrap clearfix" id="ulWrap">

             </ul>

         </div>

         <script type="text/javascript">

             window.onload = function() {

                 var ulWrap = document.getElementById("ulWrap"),

                     tabWrap = document.getElementById("tabWrap"),

                     txtArea = document.getElementById("txtArea"),

                     oLi = ulWrap.getElementsByTagName('li'),

                     oDiv = tabWrap.getElementsByTagName('div');

                 ajax('tab.json', function(str) {

                     var str = str;

                     var oJson = (new Function('return (' + str + ')'))();

                     var a = oJson['tab'];

                     //for 1-dom

                     for (var i = 0; i < a.length; i++) {

                         var ali = document.createElement("li");

                         var adiv = document.createElement("div");

                         ali.innerHTML = a[i]['title'];

                         adiv.innerHTML = "<a href='#'><img src='" + a[i]['image'] + "'/></a><p><a href='#'>" + a[i]['descript1'] + "</a></p><p><a href='#'>" + a[i]['descript2'] + "</a></p><p><a href='#'>" + a[i]['descript3'] + "</p><p><a href='#'>" + a[i]['descript4'] + "</a></p>";

                         ulWrap.appendChild(ali);

                         tabWrap.appendChild(adiv);

                         var index = i;

                         if (index == 0) {

                             ali.className = "Ahover"

                         } else {

                             adiv.className = "hide"

                         }

                     }

                     //for 1 end

                     //for 2-tab

                     for (var i = 0; i < oLi.length; i++) {

                         oLi[i].index = i;

                         oLi[i].onclick = function() {

                             for (var j = 0; j < oLi.length; j++) {

                                 oLi[j].className = "";

                                 oDiv[j].className = "hide";

                             }

                             this.className = "Ahover";

                             oDiv[this.index].className = "";

                         }

                     }

                     //for 2 end

                 })

             }

         </script>

     </body>

 </html>

json数据

{
    "tab":[
        {
            "title":"新闻",
            "image":"image/img0.jpg",
            "descript1":"中国焦虑障碍患病率为4.98% 患病率为何在上升？",
            "descript2":"病床上敬礼交警病逝，4岁女儿被确诊急性白血病",
            "descript3":"小伙200天穷游50多个城市 剃光头发在寺庙当义工",
            "descript4":"过半白领午餐吃快餐和外卖 凭“颜值“判断食物好坏"
        },
        {
            "title":"娱乐",
            "image":"image/img1.jpg",
            "descript1":"《变形金刚》宇宙要来了！《大黄蜂》定档明年6月",
            "descript2":"《傲娇与偏见》主演亮相本周《快乐大本营》",
            "descript3":"张杰《歌手》玩融合曲风 再展人声吉他高音",
            "descript4":"同样的事张馨予做遭骂 baby却获赞"
        },
        {
            "title":"军事",
            "image":"image/img2.jpg",
            "descript1":"西方耍赖皮坑中国 今天：我们告定欧盟",
            "descript2":"此人到访中国 印总理莫迪暴跳如雷",
            "descript3":"美版“知乎“:为什么老外去中国后都不想走?",
            "descript4":"不怕中国报复 韩叫嚣外国游客很多"
        }
    ]
}

JS-利用ajax获取json数据，并传入页面生成动态tab的更多相关文章

  1. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  2. js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）

    js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...

  3. Struts2.5 利用Ajax将json数据传值到JSP

    AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...

  4. ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...

  5. AngularJS学习笔记（3）——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  6. ajax获取json数据为undefined--原因解析

    解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...

  7. jQuery AJAX获取JSON数据解析多种方式示例

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

  8. java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据

    在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...

  9. ajax获取json数据 for select2

    json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...

随机推荐

  1. Remote Desktop Connection Manager远程管理工具

    下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=44989

  2. 内网环境NTP服务及时间同步(CentOS6.x)配置和部署

    目标环境,5台linux centos 6.3, 一台作为NTPD服务与外部公共NTP服务同步时间,同时作为内网的NTPD服务器,其他机器与这台服务做时间同步.  服务器IP 角色   说明 同步方式 ...

  3. Entity Framework管理实体关系（二）：管理一对二关系

    在上一篇文章中,简单的介绍了使用Fluent API如何管理一对一的实体关系,在这篇文章中,接着介绍Fluent API如何管理一对多的实体关系. 要在数据库中配置一对多关系,我们可以依赖EF约定,还 ...

  4. PHP打印重复的东西

    <?php echo str_repeat(" ", 8)?>//连续打印8个空格

  5. linux pmap命令

    pmap提供了进程的内存映射,pmap命令用于显示一个或多个进程的内存状态.其报告进程的地址空间和内存状态信息.Pmap实际上是一个Sun OS上的命令,linux仅支持其有限的功能.但是它还是对查看 ...

  6. 第三百一十九节，Django框架，文件上传

    第三百一十九节,Django框架,文件上传 1.自定义上传[推荐] 请求对象.FILES.get()获取上传文件的对象上传对象.name获取上传文件名称上传对象.chunks()获取上传数据包,字节码 ...

  7. （转）S5pv210 HDMI 接口在 Linux 3.0.8 驱动框架解析 （By liukun321 咕唧咕唧）

    作者:liukun321 咕唧咕唧 日期:2014.1.18 转载请标明作者.出处:http://blog.csdn.net/liukun321/article/details/18452663 本文 ...

  8. 转载：mysql 操作总结 INSERT和REPLACE

    转自:http://www.jb51.net/article/19411.htm   用于操作数据库的SQL一般分为两种,一种是查询语句,也就是我们所说的SELECT语句,另外一种就是更新语句,也叫做 ...

  9. LR通用的性能分析流程

    Step1:从分析Summary的事务执行情况入手Summary主要是判定事务的响应时间与执行情况是否合理.如果发现问题,则需要做进一步分析.通常情况下,如果事务执行情况失败或响应时间过长等,都需要做 ...

  10. oracle解决多表关联分组查询问题

    做了一个功能需要分组查询,同时查询A表分组查询的ID需要关联B表的数据,本来想两个表关联查询,但是报group by 语法不正确.所以做了以下修改. select count(*), cindexid ...