JS-利用ajax获取json数据，并传入页面生成动态tab
封装好的：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的更多相关文章
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）
js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...
- Struts2.5 利用Ajax将json数据传值到JSP
AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...
- ajax获取json数据及实现跨域请求
最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
- AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
- jQuery AJAX获取JSON数据解析多种方式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据
在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...
- ajax获取json数据 for select2
json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...
随机推荐
- GPU硬件加速原理 /转
现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放 ...
- php 抽象 继承 多态
1.继承和重载 !!!php中使用extends单一继承的方法 被继承的类 父类(基类) 继承者 子类(派生类) 如果说我们需要将父类方法重载(方法覆盖),在派生类里使用与基类方法重名的方法名称 ...
- 记录github 免登陆用户名密码方式
1.https 代码模式切换为ssh模式: (本博客有文章介绍) 2.~/.ssh/github_rsa.pub 内容添加到github “config“ 目录下面 3.配置~/.ssh/config ...
- Nutch系列1：简介
由Java实现的,开放源代码(open-source)的web搜索引擎. Nutch 致力于让每个人都能很容易, 同时花费很少就可以配置世界一流的Web搜索引擎. 为了完成这一宏伟的目标, Nutch ...
- html中的label配合checkbox,redio用法
<input id="a1" type="checkbox" name="a" value="33023" /&g ...
- 关于Unity中的帧动画组件的编写
一.帧动画 1: 美术准备好一个连续动作的离散图片;2: 程序在准确的时间来切换这个图片;3: 优点: 简单,速度快; 缺点:资源占用相对过大; 二.frame_anim组件编写 1: 代码里面强制要 ...
- 如何识别Java中的内存泄漏
Java开发人员都知道,Java利用垃圾回收机制来自动保持应用程序内存的干净和健康.然而可能有人不知道的是,即使使用了垃圾回收机制,Java中仍然可能存在内存泄漏风险.如果你碰到下面的错误代码: ja ...
- Spring 4 官方文档学习（十）数据访问之JDBC
说明:未修订版,阅读起来极度困难 1.Spring框架JDBC的介绍 Spring JDBC - who does what? 动作 Spring 你 定义连接参数 是 打开连接 是 指定SQ ...
- 第二百九十七节，python操作redis缓存-List类型，可以理解为列表
python操作redis缓存-List类型,可以理解为列表,是可以有重复元素的列表 List操作,redis中的List在在内存中按照一个name对应一个List来存储.如图: lpush(name ...
- e637. 向剪切板获取和粘贴文本
This examples defines methods for getting and setting text on the system clipboard. // If a string i ...