跨域问题

来源:互联网 发布:网络社区的发展 编辑:程序博客网 时间:2024/06/06 22:44

写程序遇到,发送ajax请求,请求能发出,也可以返回数据,就是不能回显。研究后发现是跨域问题:

贴下代码:方便记忆

$("#province").change(function(){
var checkValue=$("#province").val();  //获取Select选择的Value
var checkIndex=$("#province ").get(0).selectedIndex;  //获取Select选择的索引值
$.ajax({
   async:false,
   url: "http://192.168.30.45:8081/load/getCityList",
   type: "GET",
   dataType: 'jsonp',
   jsonp: 'jsonpCallback',
   jsonpCallback:'successCallback',
   data: {'regionId':checkValue},
   timeout: 5000,
   beforeSend: function(){
    //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
   },
   success: function (data) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
if(data!=""){
for(var i= 0;i<data.length;i++){
$("#city").append("<option value='"+data[i].regionId+"'>"+data[i].regionName+"</option>");
}
$("#city option[value='"+data[0].regionId+"']").attr("selected","selected");//当第一个按钮选中实现默认选中第二个下拉列表的0个元素
}
    $("#country").val("Normal");//区域上一次的区域值
   
   },
    complete: function(XMLHttpRequest, textStatus){
   },
   error: function(xhr){
    alert("请求出错(请检查相关网络状况.");
   }
});
});

后台controller代码:

/**

* @Description :获取城市信息
* @author : zong
* @date :2017年10月19日15:25:52
*/
@RequestMapping(value = "/getCityList")
@ResponseBody
public String getCityList(Integer regionId) {
List<DefRegion> cityList = null;
String jsonStr = null;
DefRegion defRegion = defRegionBiz.getById(regionId);
String regionCode = defRegion.getRegionCode();
if(regionCode!=null && regionCode!=""){
cityList = defRegionBiz.getByParentId(regionCode);
jsonStr = JsonUtils.beanToJson(cityList);
}
String abc = "successCallback("+jsonStr+")";
return abc;
}
分析:当一个ajax请求使用jsonp属性后,就不再是一个ajax请求,而且通过js发送的请求,controller返回的话,根据jsonp定义的函数名,返回一段js字符串。




原创粉丝点击