前端使用lbs云地图补全详细地址搜素功能（涉及跨域请求）

跨域请求_专题讲解

在Java中,我们可以通过WebClient或HttpClient直接进行跨域远程访问, 但是在前端页面中通过js却存在着限制

 

1.什么是跨域访问?  http://localhost:8080/xxx/xxx

协议，端口，域名任一不同即跨域, 浏览器由于自身限制默认所有文件都不支持跨域访问,例如:

$.post( "域外地址", {}, function(data){

 

});

 

但是也有例外,如果网页上通过<scriptsrc="域外js"></script>,<imgsrc=”域外图片”/>以及<link href=”域外样式”/>这样的标签来引用域外的资源是可以的

 

2.如何实现跨域访问?

我们可以在远程服务器上把json数据装进js文件里，然后把该js文件输出给客户端, 客户端通过<script>标签来接收, 这就是jsonp(JSON with Padding)

 

 

3.演示jsonp的实现原理(参考代码在最后一天的项目源码中)

运行http://localhost:9001/bos_management/TestJSONP.html

l  bos_management项目中的TestJSONP.html

l  bos_fore项目中的JSONPAction.java

 

 

4.getJSON方法的实现原理

jQuery给我们提供了一个getJSON函数用来实现跨域访问, 打开”getJSON方法实现跨域请求原理分析.bmp”

如果只是简单生成自动搜索补全只需要

var ac = new BMap.Autocomplete( //建立一个”自动完成”类的对象

        {

                 "input": "sendAddress"     //input是固定参数名, 值是下面网页中"详细地址"文本框的ID

        });

代码如下：

效果图：

代码进阶：输入详细地址后，会自动更改省市区信息

<scripttype="text/javascript">  

        varac = new BMap.Autocomplete( //建立一个”自动完成”类的对象

        {

                 "input": "sendAddress"     //input是固定参数名, 值是下面网页中"详细地址"文本框的ID

        });

//其实上面的代码就已经实现了自动补全功能,下面的代码是为了获取云地理编码数据,解决详细地址跟省市区不一致的bug

        varmyValue;

        ac.addEventListener("onconfirm",  function(e) { //鼠标点击下拉列表某一项的事件

                                                  var_value = e.item.value;  //得到选中项的值

                                                  myValue= _value.province + _value.city  //从选中项的值中分别把省市区街道商户名等详细信息取出来

                                                                   +_value.district + _value.street

                                                                   +_value.business;

                                                  console.log(myValue);                                     

                                                  //得到详细地址后，远程调用百度地图获取云地理编码数据

                                                  varaddress = encodeURIComponent(myValue);  //转码处理

                                                  console.log(address);

                                                  $.getJSON("http://api.map.baidu.com/cloudgc/v1?ak=zbLsuDDL4CS2U0M4KezOZZbGUY9iWtVf&address="

                                                                                                   +address + "&callback=?",

                                                                                    function(data){

                                                                                            console.log(data);

                                                                                            if(data.status == 0 && data.result.length > 0) {

                                                                                                    $('#sendAreaInfo').citypicker('reset');

                                                                                                    $('#sendAreaInfo').citypicker('destroy');

                                                                                                    $('#sendAreaInfo').citypicker(

                                                                                                                      {

                                                                                                                                      province :data.result[0].address_components.province,

                                                                                                                                     city: data.result[0].address_components.city,

                                                                                                                                      district :data.result[0].address_components.district,

                                                                                                                      });

                                                                                            }

                                                                                    });

                                          });

</script>