怎么样使用ajax请求数据？ _ 路由器设置|192.168.1.1|无线路由器设置|192.168.0.1 - 路饭网
您的位置： >
> 阅读资讯：怎么样使用ajax请求数据？
怎么样使用ajax请求数据？
怎么样使用ajax请求数据？
今天有这样一个需求，点击六个大洲，出现对应的一些请求信息，展示在下面，请求请求过后，第二次点击就无需请求。
如图所示：点击北美洲下面出现请求的一些数据
html代码结构：
&div class=&conSixmap&&
&div class=&name conmap01& data-name=&beimeizhou&&
&a href=&javascript:void(0)&&北美洲&/a&
&div class=&condetail&&&/div&
&div class=&name conmap02& data-name=&nanmeizhou&&
&a href=&javascript:void(0)&&南美洲&/a&
&div class=&condetail&&&/div&
&div class=&name conmap03& data-name=&ouzhou&&
&a href=&javascript:void(0)&&欧洲&/a&
&div class=&condetail&&&/div&
&div class=&name conmap04& data-name=&feizhou&&
&a href=&javascript:void(0)&&非洲&/a&
&div class=&condetail&&&/div&
&div class=&name conmap05& data-name=&yazhou&&
&a href=&javascript:void(0)&&亚洲&/a&
&div class=&condetail&&&/div&
&div class=&name conmap06& data-name=&dayangzhou&&
&a href=&javascript:void(0)&&大洋洲&/a&
&div class=&condetail&&&/div&
.conSixmap{position:width:678height:335margin:0background:url(../images/tuanduimapBg.png) no-color:#000;font-family:&微软雅黑&}
.conSixmap .name .condetail{display:position:z-index:10;width:216padding:10left:50%;margin-left:-118top:54background:url(../images/opcity83.png)border-radius:5}
.conSixmap .condetail span{display:color:#font-size:14text-align:}
.conSixmap .name{position:width:52height:55}
.conSixmap .name a{display:z-index:2;position:padding-top:35text-align:cursor:width:52height:20color:#000;font-size:12}
.conSixmap .conmap01{left:91top:73}
.conSixmap .conmap01 a{background:url(../images/beimeipicBg.png) no-}
.conSixmap .conmap02 {left:180top:213}
.conSixmap .conmap02 a{background:url(../images/nanmeimapbg.png) no-}
.conSixmap .conmap03 {left:339top:68}
.conSixmap .conmap03 a{background:url(../images/ouzhoumapBg.png) no-}
.conSixmap .conmap04{left:327top:158}
.conSixmap .conmap04 a{background:url(../images/feizhoumapbg.png) no-}
.conSixmap .conmap05 {left:480top:75}
.conSixmap .conmap05 a{background:url(../images/yazhoumapBg.png) no-}
.conSixmap .conmap06 {left:545top:220}
.conSixmap .conmap06 a{background:url(../images/dayangmapbg.png) no-}
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&
$(document).ready(function(){
//添加地图
var stauteArr={
'beimeizhou':'true',
'nanmeizhou':'true',
'ouzhou':'true',
'feizhou':'true',
'yazhou':'true',
'dayangzhou':'true'
$(&.conSixmap .name&).on('click',function(){
var _this=
var htmlcon=&&;
$(this).siblings(&.name&).children(&.condetail&).fadeOut(500);
$(this).children(&.condetail&).fadeIn(500);
var _name=$(this).attr('data-name');
url:&js/schoolMap.json&,
type:'get',
dataType:&json&,
success: function(data){
for(var i in data){
if(_name==i && stauteArr[i]=='true'){
for(var j=0;j&data[i].j++){
htmlcon+=&&span&&+data[i][j]+&&/span&&;
$(_this).children(&.condetail&).append(htmlcon);
stauteArr[i]='false';
error: function(){
alert('请求失败，请检查网络');
本文地址：
相关文章列表抓包工具Charles的使用心得 - 简书
抓包工具Charles的使用心得
Charles其实是一款代理服务器，通过成为电脑或者浏览器的代理，然后截取请求和请求结果达到分析抓包的目的。该软件是用Java写的，能够在Windows，Mac，Linux上使用。开发iOS都在Mac系统上吧，安装Charles的时候要先装好Java环境。这么好的软件不是免费的，要好几十刀呢，我这里有一个Mac上的破解版，，当然不是最新版的。如果你想体验最新版，Charles是提供试用的。
Charles主要功能
支持SSL代理。可以截取分析SSL的请求。
支持流量控制。可以模拟慢速网络以及等待时间（latency）较长的请求。
支持AJAX调试。可以自动将json或xml数据格式化，方便查看。
支持AMF调试。可以将Flash Remoting 或 Flex Remoting信息格式化，方便查看。
支持重发网络请求，方便后端调试。
支持修改网络请求参数。
支持网络请求的截获并动态修改。
检查HTML，CSS和RSS内容是否符合W3C标准。
先看一下Charles的庐山真面目吧！
接下来要把电脑设置为代理
这样你会发现，你通过浏览器请求的网址都会出现在这里，iOS模拟器的所有的网络请求也会出现在这里。点击某一个网址后，你会发现右边会出现这个网址请求的大概信息，点击具体的请求后会出现request和response等信息
如果你发现返回的是乱码，首先看是在http请求还是https请求，如果是http请求，那么应该就是返回来的中文乱码,解决方案是找到该软件显示包内容，Contents目录下的info.plist，打开文件找到vmoption,添加-Dfile.encoding=UTF-8即可。
如果是https请求出现的乱码，如下图这种情况
这时候你就需要安装Charles的CA证书了，首先到去
下载CA证书文件。双击crt文件，选择总是信任就可以了，当然如果要抓取iPhone设备上的HTTPS请求，需要在iPhone上也安装一个证书，在手机浏览器输入这个网址： ，点击安装即可。然后你就可以告别那烦人的乱码，可以愉快地抓包了。
抓取真机上的包
抓取真机上的数据非常的简单，首先使手机和电脑在一个局域网内，不一定非要是一个ip段，只要是同一个路由器下就可以了。按照上面说的把证书安装好，然后找到电脑的IP，你可以选择在终端输入ifconfig en0来获取，也可以选择打开网络偏好设置来查看。
终端获取IP
网络偏好设置查看IP
接下来打开Charles的代理设置：Proxy-&Proxy Settings，设置一下端口号，默认的是8888，这个只要不和其他程序的冲突即可,并且勾选Enable transparent HTTP proxying。
端口号设置
在手机上连接上和电脑在同一局域网的网络上设置HTTP代理。端口号就是刚刚在Charles上设置的那个。
然后在手机上随便打开一个网址，这是Charles会弹出一个框让你确认是否代理，点击allow就可以了，然后你就会在Charles上发现手机上的请求了。
在 Charles 的菜单栏选择 Proxy-&Recording Settings，然后选择 Include 栏，选择Add，然后填入需要监控的协议，主机地址，端口号,这样就达到了过滤的目的。如下图：
还有一种方法就是在一个网址上右击，选择Focus，然后其他的请求就会被放到一个叫Other Host的文件夹里面，这样也达到了过滤的目的。
断点的功能搞开发不会不知道，在Charles发起一个请求的时候，我们是可以给某个请求打一个断点的，然后来观察或者修改请求或者返回的内容，但是在这过程中药注意请求的超时时间问题。要针对某一个请求设置断点，只需要在这个请求网址右击选择Breakpoints就可以断点某一个请求了。
模拟网速慢
有时候在开发的时候我们想要模拟一下网络慢的情况，这时候Charles他是可以帮助到你的，在Proxy-&Throttle Setting，然后选择Enable Throttling，在Throttle Preset下选择网络类型即可，具体设置你可以自行拿捏。
请求重定向
请求重定向的作用是什么呢？开发中一般都是测试环境，如果我们想对比一下和线上版本的区别的话，可以讲测试的请求重定向到正式环境下。在选择 Tools-&`Map Remote下：
有时候我们会测一下请求的参数不同会带来不同的返回结果以测试是否达到业务需求，或者需要不同的返回结果来验证我们对数据的处理是否正确，这时候需要后台的同事配合，但是有了Charles，我们可以自己把控接口返回来的内容，比如数据的空与否，数据的长短等等。在Tools-&Rewrite Settings下：
Charles还有一下其他的妙用。慢慢的去发掘吧！
刚刚毕业的小伙子一个，在百度做 iOS 开发。}