jQuery实例之ajax请求json数据案例
今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求。
如图所示:点击北美洲下面出现请求的一些数据
html代码结构:
<div class="conSixmap">
<div class="name conmap01" data-name="beimeizhou">
<a href="javascript:void(0)">北美洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap02" data-name="nanmeizhou">
<a href="javascript:void(0)">南美洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap03" data-name="ouzhou">
<a href="javascript:void(0)">欧洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap04" data-name="feizhou">
<a href="javascript:void(0)">非洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap05" data-name="yazhou">
<a href="javascript:void(0)">亚洲</a>
<div class="condetail"></div>
</div>
<div class="name conmap06" data-name="dayangzhou">
<a href="javascript:void(0)">大洋洲</a>
<div class="condetail"></div>
</div>
</div>
css样式:
.conSixmap{position:relative;width:678px;height:335px;margin:0 auto;background:url(../images/tuanduimapBg.png) no-repeat;color:#000;font-family:"微软雅黑"}
.conSixmap .name .condetail{display:none;position:absolute;z-index:;width:216px;padding:10px;left:50%;margin-left:-118px;top:54px;background:url(../images/opcity83.png) repeat;border-radius:5px;}
.conSixmap .condetail span{display:block;color:#fff;font-size:14px;text-align:left;}
.conSixmap .name{position:absolute;width:52px;height:55px;}
.conSixmap .name a{display:block;z-index:;position:absolute;padding-top:35px;text-align:center;cursor:pointer;width:52px;height:20px;color:#000;font-size:12px;}
.conSixmap .conmap01{left:91px;top:73px;}
.conSixmap .conmap01 a{background:url(../images/beimeipicBg.png) no-repeat top center;} .conSixmap .conmap02 {left:180px;top:213px;}
.conSixmap .conmap02 a{background:url(../images/nanmeimapbg.png) no-repeat top center;} .conSixmap .conmap03 {left:339px;top:68px;}
.conSixmap .conmap03 a{background:url(../images/ouzhoumapBg.png) no-repeat top center;} .conSixmap .conmap04{left:327px;top:158px;}
.conSixmap .conmap04 a{background:url(../images/feizhoumapbg.png) no-repeat top center;} .conSixmap .conmap05 {left:480px;top:75px;}
.conSixmap .conmap05 a{background:url(../images/yazhoumapBg.png) no-repeat top center;} .conSixmap .conmap06 {left:545px;top:220px;}
.conSixmap .conmap06 a{background:url(../images/dayangmapbg.png) no-repeat top center;}
json格式:
{
"beimeizhou": [
"请求的json数据1",
"请求的json数据2"
],
"nanmeizhou": [
"请求的json数据3",
"请求的json数据4"
],
"ouzhou": [
"请求的json数据5",
"请求的json数据6",
"请求的json数据7",
"请求的json数据8"
],
"feizhou": [
"请求的json数据9",
"请求的json数据10",
"请求的json数据11",
"请求的json数据12"
],
"yazhou": [
"请求的json数据13",
"请求的json数据14"
],
"dayangzhou": [
"请求的json数据15",
"请求的json数据16"
]
}
js代码:
$(document).ready(function(){
//添加地图
var stauteArr={
'beimeizhou':'true',
'nanmeizhou':'true',
'ouzhou':'true',
'feizhou':'true',
'yazhou':'true',
'dayangzhou':'true'
};
$(".conSixmap .name").on('click',function(){
var _this=this;
var htmlcon="";
$(this).siblings(".name").children(".condetail").fadeOut(500);
$(this).children(".condetail").fadeIn(500);
var _name=$(this).attr('data-name'); //当前请求过后不需要请求
if(stauteArr[_name] =='false'){
return;
}
$.ajax({
url:"js/schoolMap.json",
type:'get',
data:{},
dataType:"json",
success: function(data){
for(var i in data){
if(_name==i){
console.log(data[i]);
for(var j=0;j<data[i].length;j++){
htmlcon+="<span>"+data[i][j]+"</span>";
}
$(_this).children(".condetail").append(htmlcon);
stauteArr[i]='false';
}
}
},
error: function(){
alert('请求失败,请检查网络');
}
}); });
});
jQuery实例之ajax请求json数据案例的更多相关文章
- ajax请求json数据案例
今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...
- 关于使用Ajax请求json数据,@RequestMapping返回中文乱码的几种解决办法
一.问题描述: 使用ajax请求json数据的时候,无论如何返回的响应编码都是ISO-8859-1类型,因为统一都是utf-8编码,导致出现返回结果中文乱码情况. $.ajax({ type:&quo ...
- bootstrap通过ajax请求JSON数据后填充到模态框
1. JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...
- ajax请求json数据跨域问题(转)
一.后台代理技术 由服务器端向跨域下的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 具体操作如下: 1.在localhost:81/a.html中,向同源下的某个代理程序发出请求 $ ...
- 用 jQuery.getJSON() 跨域请求 JSON 数据
$.getJSON()可以理解为特殊形式的$.ajax(),手册里的说明好复杂,这里只记录一下用到的跨域请求. 先说在同一域名下,js发送数据到php,php返回JSON数据: $.getJSON(' ...
- 浅析ajax请求json数据并用js解析(示例分析)
这应该是每个web开发的人员都应该掌握的基础技术,需要的朋友可以参考下 自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp ...
- jQuery插件:Ajax将Json数据自动绑定到Form表单
jQuery注册方法的两种常用方式: //jQuery静态方法注册 //调用方法$.a1() $.extend({ a1: function () { console.log("a1&quo ...
- ajax 请求json数据中json对象的构造获取问题
前端的界面中,我想通过ajax来调用写好的json数据,并调用add(data)方法进行解析,请求如下: json数据如下: { “type”:"qqq", "lat&q ...
- 原生ajax请求json数据
<?php header("content-type:text/html;charset=utf-8"); echo '{"name":"小明& ...
随机推荐
- ReactNative学习笔记(一)环境搭建
前言 本文开发环境为Windows,目标平台为Android,react-native版本为0.35.0. 环境搭建 注意,本文不是按照官网的教程来的,官网说必须安装什么Chocolatey,我懒得鸟 ...
- 由百度 “PHP薪资” 引发的思考
昨天晚上睡觉的时候百度了一下 “PHP薪资”,看到了各种各样的答案,从百度知道到知乎,再到各个论坛……答案也是从 2k-16k 不等(不过说实话,2k是吓到我了),其中一些答案说到了在中国从事某一行业 ...
- Android精通教程-第一节Android入门简介
前言 大家好,给大家带来Android精通教程-第一节Android入门简介的概述,希望你们喜欢 每日一句 If life were predictable it would cease to be ...
- spring框架学习笔记1:搭建测试
Spring框架介绍: Spring框架涵盖了web.service.dao三层,本身是一个存放对象的容器 形象来说:Spring是项目中对象管家 Spring框架的两大核心思想:控制反转(IOC). ...
- 视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频
视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频 2018-07-11 | 标签»下载, 下载工具, 视频 又是视频下载,老生常谈的话题.阿刚同学已在乐软博客多次与大家分享推荐 ...
- 一个隐蔽的C语言问题反思
今天在编译一个C代码的时候,从别的编译ok的头文件中拷贝了一份在上面做修改,没想到修改好之后一直 无法调用这个头文件中的函数和变量.看了好久,才在预编译宏中找到了问题的根源.代码 如下所示: 头文件A ...
- 国外青少年最喜爱的聊天 app,竟然是 Google Docs
简评: 这还真不是标题党,Google Docs 的协作中内置了实时聊天的功能,也可以进行 comments,颇有种现代「传纸条」的既视感.其实国内的石墨文档.腾讯文档等协作工具也有类似的效果,本文很 ...
- 排序算法系列:选择排序算法JAVA版(靠谱、清晰、真实、可用、不罗嗦版)
在网上搜索算法的博客,发现一个比较悲剧的现象非常普遍: 原理讲不清,混乱 啰嗦 图和文对不上 不可用,甚至代码还出错 我总结一个清晰不罗嗦版: 原理: 从数组头元素索引i开始,寻找后面最小的值(比i位 ...
- Spark架构
Spark架构 为了更好地理解调度,我们先来鸟瞰一下集群模式下的Spark程序运行架构图. 1. Driver Program 用户编写的Spark程序称为Driver Progr ...
- 机器学习与Tensorflow(5)——循环神经网络、长短时记忆网络
1.循环神经网络的标准模型 前馈神经网络能够用来建立数据之间的映射关系,但是不能用来分析过去信号的时间依赖关系,而且要求输入样本的长度固定 循环神经网络是一种在前馈神经网络中增加了分亏链接的神经网络, ...