JSONP跨域获取百度地图实时拥堵信息
ajax只能请求本台服务器的后台,获取到后台返回来的数据。但是无法获取别的服务器提供的请求接口。这时JSONP跨域就解决了这个问题。
这里是调用百度地图API获取实时堵车数据的JS代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取数据</title>
<link href="../static/bootstap/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../static/bootstap/js/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../static/bootstap/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<br><br>
<br><br>
<br>
<div class="text-center">
<h1>正在获取数据.......</h1>
</div>
</body>
</html>
<script type="application/javascript">
function getData(street,city) {
$.ajax(
{
url: "http://api.map.baidu.com/traffic/v1/road?road_name="+street+"&city="+city+"&ak=lWzaIyq65zwIZtpVRanHbCuT3oHb8YTk",//GET请求
type: "get",
dataType: "jsonp",
async: false,
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
success: function (data) {
console.log(data);
var object = new Object();
var parseJSON = JSON.parse(JSON.stringify(data));
object["status"] = parseJSON["status"];
object["description"] = parseJSON["description"];
object["access_jam"] = parseJSON.evaluation["status"];
object["street"]=street;
object["city"]=city;
$.ajax(
{
url: "/interface",
type: "post",
data: JSON.stringify(object),
contentType: 'application/json',
success: function (data) {
console.log(data);
}
}
)
}
}
)
}
$(function () {
// var street = new Array();
// street[0]="西二环";
// // street[1]="永安里";
// street[1]="成都北路";
// var city = new Array();
// city[0]="北京";
// // city[1]="北京";
// city[1]="上海";
//每15分钟执行一次
setInterval(function (){
getData("西二环","北京");
getData("成都北路","上海");
},1000*15*60);
});
</script>
我的代码实现的功能是将跨域请求的实时百度地图数据获取到,然后再次嵌套一个ajax发行到后端
后台代码：
package com.zj.data.controller;
import com.zj.data.domin.RealData;
import com.zj.data.service.serviceimp.CompareService;
import com.zj.data.service.serviceimp.dataCUDE;
import lombok.NoArgsConstructor;
import org.checkerframework.checker.units.qual.A;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.Date;
import java.util.List;
@Controller
public class controllerinterface {
@Autowired
dataCUDE dataCURD;
@Autowired
CompareService compareService;
@ResponseBody
@RequestMapping("/interface")
public String test (@RequestBody RealData realData)
{
dataCURD.insertintodataReal(realData);
return "1";
}
希望大家看见我的文章能给个赞 有漏洞的地方请大佬指出。
版权声明：本文为weixin_44872301原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。