JS-利用ajax获取json数据,并传入页面生成动态tab

封装好的:ajax.js

 1 function ajax(url, fnSucc,fnFaild){
 2     //1【创建】
 3     if(window.XMLHttpRequest){
 4         var oAjax = new XMLHttpRequest();
 5     }else{
 6         var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
 7     };
 8     
 9     //2: 【连接】true:表示异步
10     oAjax.open('GET',url,true);
11     
12     //3:【发送】
13     oAjax.send();
14     
15     //4:【接受】
16     oAjax.onreadystatechange = function(){
17         
18         //判断浏览器操作到哪一步
19         if(oAjax.readyState == 4){//4:读取完成
20             if(oAjax.status==200){
21                 fnSucc(oAjax.responseText);
22             }else{
23                 if(fnFaild){
24                     fnFaild(oAjax.status);
25                 }
26             }
27             
28         }
29     }
30 }

结构与js代码:

  1 <!DOCTYPE html>
  2 <html>
  3 <!--
  4     作者:702004176@qq.com
  5     时间:2017-04-10
  6     描述:
  7 -->
  8     <head>
  9         <meta charset="UTF-8">
 10         <title>ajax+tab</title>
 11         <meta name="Description" content="ajax获取json数据,并传入页面" />
 12         <meta name="author" content="郭菊锋702004176@qq.com"/>
 13         <script src="ajax.js" type="text/javascript" charset="utf-8"></script>
 14         <style type="text/css">
 15             * {
 16                 margin: 0;
 17             }
 18             
 19             body {
 20                 font-family: "微软雅黑";
 21             }
 22             
 23             li {
 24                 list-style: none;
 25             }
 26             
 27             a {
 28                 text-decoration: none;
 29                 color: #000;
 30             }
 31             
 32             a:hover {
 33                 text-decoration: underline;
 34                 color: #194090;
 35             }
 36             
 37             .clearfix:after {
 38                 content: "";
 39                 clear: both;
 40                 display: block;
 41             }
 42             
 43             .tabWrap {
 44                 overflow: hidden;
 45                 width: 611px;
 46                 margin: 100px auto;
 47             }
 48             
 49             .ulWrap {
 50                 padding: 0;
 51             }
 52             
 53             .ulWrap li {
 54                 overflow: hidden;
 55                 float: left;
 56                 width: 199px;
 57                 height: 50px;
 58                 line-height: 50px;
 59                 margin-right: 3px;
 60                 text-align: center;
 61                 color: #DFE9F6;
 62                 background: #5884CF;
 63             }
 64             
 65             .ulWrap li.Ahover,
 66             .ulWrap li:hover {
 67                 cursor: pointer;
 68                 background: #194090;
 69             }
 70             
 71             .tabWrap div {
 72                 overflow: hidden;
 73                 width: 591px;
 74                 padding: 20px;
 75                 padding: 15px 5px;
 76                 background: #f1f2f3;
 77                 border: 1px solid #5884CF;
 78                 border-top: 0;
 79             }
 80             
 81             .tabWrap div.hide {
 82                 display: none;
 83             }
 84             
 85             .tabWrap div p {
 86                 margin-top: 10px;
 87             }
 88             
 89             
 90             .tabWrap div img:hover {
 91                 -webkit-box-shadow: 1px 2px 4px 1px #8aa59f;
 92                 box-shadow: 1px 2px 4px 1px #8aa59f;
 93             }
 94         </style>
 95     </head>
 96 
 97     <body>
 98         <div class="tabWrap" id="tabWrap">
 99             <ul class="ulWrap clearfix" id="ulWrap">
100             </ul>
101         </div>
102         <script type="text/javascript">
103             window.onload = function() {
104                 var ulWrap = document.getElementById("ulWrap"),
105                     tabWrap = document.getElementById("tabWrap"),
106                     txtArea = document.getElementById("txtArea"),
107                     oLi = ulWrap.getElementsByTagName('li'),
108                     oDiv = tabWrap.getElementsByTagName('div');
109                 ajax('tab.json', function(str) {
110                     var str = str;
111                     var oJson = (new Function('return (' + str + ')'))();
112                     var a = oJson['tab'];
113                     //for 1-dom
114                     for (var i = 0; i < a.length; i++) {
115                         var ali = document.createElement("li");
116                         var adiv = document.createElement("div");
117                         ali.innerHTML = a[i]['title'];
118                         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>";
119                         ulWrap.appendChild(ali);
120                         tabWrap.appendChild(adiv);
121                         var index = i;
122                         if (index == 0) {
123                             ali.className = "Ahover"
124                         } else {
125                             adiv.className = "hide"
126                         }
127                     }
128                     //for 1 end
129 
130                     //for 2-tab
131                     for (var i = 0; i < oLi.length; i++) {
132                         oLi[i].index = i;
133                         oLi[i].onclick = function() {
134                             for (var j = 0; j < oLi.length; j++) {
135                                 oLi[j].className = "";
136                                 oDiv[j].className = "hide";
137                             }
138                             this.className = "Ahover";
139                             oDiv[this.index].className = "";
140                         }
141                     }
142                     //for 2 end
143                 })
144             }
145         </script>
146     </body>
147 
148 </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":"不怕中国报复 韩叫嚣外国游客很多"         }     ] }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏域名资讯

多类好米齐交易:域名776.cn近10万元结拍

好米有好价格,这是域名圈内不变的定律,因为好米不仅受欢迎,而且易流通,因此价格好情有可原。近日,就有一批不错的域名结拍,涵盖数字、拼音和字母等类型。

23070
来自专栏Nian糕的私人厨房

JavaScript 展开全文和收起全文

我们在浏览文章列表页的时候,往往只会看到一部分的摘要,在摘要下面会有一个展开全文的按钮,点开后就能看到完整内容,而原来的展开全文按钮此时变成了收齐全文的按钮,同...

16040
来自专栏GIS讲堂

高考季,献给各位学子

今天,举国瞩目的高考已经结束了,在这样的时刻“LZUGIS”携手“GIS讲堂”为大家从GIS和数据方面给大家做一个分析。

11760
来自专栏数据结构与算法

BZOJ2752: [HAOI2012]高速公路(road)(线段树 期望)

Y901高速公路是一条重要的交通纽带,政府部门建设初期的投入以及使用期间的养护费用都不低,因此政府在这条高速公路上设立了许多收费站。 Y901高速公路是一条由N...

5810
来自专栏生信技能树

了解5个乳腺癌表达数据集

这5个数据集都是以前的研究者发表的,它们 Mainz, Transbig, UPP, and UNT 数据集 分别对应的是: GSE11121,GSE7390,...

16940
来自专栏数据小魔方

这么牛X的包,一般人我不告诉他!!!

本文将给大家介绍一个ggplot2灰常牛X的可视化扩展包,我将该包主页的包用法介绍整理成中文,分享给大家。 包名叫geofacet,有经验的charter大概...

35150
来自专栏一枝花算不算浪漫

[jQuery学习系列六]6-jQuery实际操作小案例

468170
来自专栏滕先生的博客

UIDynamic 物理引擎概念介绍UIDynamicAnimator(动画者)动力行为(UIDynamicBehavior)一、抽象类 UIDynamicBehavior二、UIGravityBeh

47270
来自专栏牛客网

网易考拉前端开奖啦~分享一波面筋

内推投了十几二十家公司,大多没消息。BAT都没有面(百度投了没消息,腾讯打了一次电话来没接到就变灰了,阿里问我有没兴趣改测试岗(表示没兴趣))。于是最终面试的就...

13520
来自专栏GIS讲堂

教你如何拔取百度地图POI兴趣点

调用聚合数据,首先得注册聚合。聚合数据提供的百度地图POI的接口有三个:数据分类,查询数据和获取周边数据。想要获取百度POI兴趣点,涉及到的接口为数据分类,查询...

1.3K40

扫码关注云+社区

领取腾讯云代金券