jquery中发送ajax请求

最新推荐文章于 2024-10-22 15:15:00 发布

小天空happy

最新推荐文章于 2024-10-22 15:15:00 发布

阅读量510

点赞数

分类专栏： jquery 文章标签： jquery ajax请求迭代

本文链接：https://blog.youkuaiyun.com/qq_16872369/article/details/42738963

版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Ajax技术实现实时获取并更新自行车站点数据，并结合百度地图API在网页上动态展示这些数据。通过解析JSON响应，实现地图上的标记和信息窗口的迭代显示，为用户提供直观的周边自行车站点分布信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery中发送ajax请求，在请求的过程中注意返回的类型，一般分为两种类型，一种是text，一种是json。返回类型只要在后台打包好就行。

如果返回的json类型，要迭代输出数据的话，在jquery中可能会遇到一个问题，就是只能迭代输出重复的第一个数据，这时候我们js中的代码就要优化，详细看如下代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
		#golist {display: none;}
		@media (max-device-width: 780px){#golist{display: block !important;}}
	</style>
	<script type="text/javascript" src="../../resources/script/framework/hd_Include.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=09f2x6VgkDlenCiGoUSMiZYs&v=1.4"></script>
	<title>周边自行车站点分布</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	window.οnlοad=function(){
		var lon;
		var lat;
		if(getQueryString("lon")=='loction'){
			if(navigator.geolocation){
			       navigator.geolocation.getCurrentPosition(showPosition);
			       //alert('1122222');
			      }else{
			       	alert("您的浏览器不支持地理定位");
			      }
			}else{
				lon=getQueryString("lon");
				lat=getQueryString("lat");
				var loction = 'other';
				queryloction(lon,lat,loction,"","");
			}
	}
	
	function queryloction(lon1,lat1,loction,lon2,lat2){
		// 百度地图API功能
		var map = new BMap.Map("allmap");
		map.centerAndZoom(new BMap.Point(lon1, lat1), 15);
	
		map.addControl(new BMap.ZoomControl());  //添加地图缩放控件
		var myIcon =new BMap.Icon("../../resources/images/loction.png", new BMap.Size(23, 28), { 
		    imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
		 });
		var marker1 = new BMap.Marker(new BMap.Point(lon1, lat1), {icon: myIcon});
		map.addOverlay(marker1);
		//创建信息窗口
		/*var infoWindow1 = new BMap.InfoWindow("我的位置");
		marker1.openInfoWindow(infoWindow1); 
		marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});*/
		var lon;
		var lat; 
		if(loction=="current"){
			lon = lon2;
			lat = lat2;
		}else{
			lon = lon1;
			lat = lat1;
		}
       $.ajax({
        	type : "post",<span style="color: rgb(204, 0, 0); font-family: Arial, Helvetica, sans-serif;">//请求类型</span>
        	url : "bikeRentingAction.do",<span style="color: rgb(204, 0, 0); font-family: Arial, Helvetica, sans-serif;">//请求地址（这里是action请求）</span>
        	dataType:'json',<span style="color:#cc0000;">//返回数据类型呢（text/json）</span>
        	data : 'lon=' + lon +'&lat='+lat+'&loction='+loction,<span style="color:#cc0000;">//请求地址带点参数</span>
        	success:function(data){<span style="color:#cc0000;">//成功后返回的数据，接着做相应处理</span>
        		//alert(data.length);
        		for(var i=0;i<data.length;i++){
				    // 百度地图API功能
					var marker2 = new BMap.Marker(new BMap.Point(data[i].longitude, data[i].latitude));  //创建标注
					map.addOverlay(marker2);// 将标注添加到地图中
					//创建信息窗口
					(function(x){<span style="color:#cc0000;">//迭代可能出现问题，优化的代码</span>
						/*var infoWindow2 = new BMap.InfoWindow("站点名："+data[i].rentingname+"<br>位置："+data[i].location);*/
						var infoWindow2 = new BMap.InfoWindow("站点名："+data[i].rentingname);
						marker2.addEventListener("click", function(){
							this.openInfoWindow(infoWindow2);
						});
					})(i);  
        		}
        	},
        	error : function() {<span style="color:#cc0000;">//失败后，直接返回</span>
       	 		return;
    		}
        });
	}
	function getQueryString(name) {
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	    var r = window.location.search.substr(1).match(reg);
	    if (r != null) return unescape(r[2]); return null;
    }
    function showPosition(position){
	    lat=position.coords.latitude;
	    lon=position.coords.longitude;
	    $.ajax({
        	type : "post",
        	url : "GPStoBaiduAction.do",
        	dataType:'json',
        	data : 'lon=' + lon +'&lat='+lat,
        	success:function(data){
		    var loction = 'current';
		    queryloction(data[0],data[1],loction,lon,lat);
        	},
        	error : function() {
       	 		return;
    		}
        });
	}
	
	</script>