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:10;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:2;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‘);
          $.ajax({
            url:"js/schoolMap.json",
            type:‘get‘,
            data:{},
            dataType:"json",
            success: function(data){

                for(var i in data){
                    if(_name==i && stauteArr[i]==‘true‘){
                        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(‘请求失败,请检查网络‘);
            }
        });

    });
});

*需要demo猛点该文字,百度云盘下载*

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。

时间: 2024-10-08 09:53:41

ajax请求json数据案例的相关文章

ajax请求json数据异常:nested exception is net.sf.json.JSONException: java.lang.reflect.InvocationTargetException] with root cause

ajax请求json数据异常:nested exception is net.sf.json.JSONException: java.lang.reflect.InvocationTargetException] with root cause 1.异常原因:所请求的json数据中包含java.util.date数据类型,但是在后台并没有将其格式转换 2.解决方法:添加工具类DateJsonValueProcessor import java.text.SimpleDateFormat; imp

Ajax请求json数据

同域请求json数据 客户端js代码: <script> $.ajax({ url: 'http://127.0.0.2/index.php', type: 'GET', dataType: 'json', data: {ac: 'xcajax',at: 'goodslist'}, success: function(json){ $.each(json,function(i){ console.log(json[i].title); }) } }); </script> 服务端端

原生ajax请求json数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="bt1">点击获取json数据</button> <script type="text

浅析ajax请求json数据并用js解析 [转]

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="js/jq

简单AJAX请求JSon数据

Ajax 全名为Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). 它是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 在传统方法中,当我们需要向服务器请求数据时,浏览器需要等待该请求完成之后才能够进行下一步的操作,而在此之前是不能够对网页进行其他的操作,如果因请求的数据过大或者网络延迟等原因而造成的等待服务器响应的时间过久,无疑会使得用户的体验感降低,甚至有可能直接导致程序挂起. 而如果我们采用AJax技术,则可以避免这种

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法:Js代码 jQuery.get

Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据)

form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multipart/form-data"> {# 这里必须要请求头格式才能把上传文件的对象传过去 enctype="multipart/form-data"#} 姓名 <input type="text" name="user">

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

最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口分割线 Begin-------------------------------------------------------------------------------------------------- 电商接口 淘宝商品搜索建议: http://suggest.taobao.com/s

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

AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范