前端ajax請求跨域,使用jsonp完美解決
【1】今天在html中ajax請求另外一個專案的接口出現跨域問題,好吧,那就想辦法解決吧,網上百度了有jsonp解決方案,但是其中有各種坑(坑是因為自己不瞭解導致),直接上原始碼吧。。。。。。
【前端】
function showImg(){
$.ajax({
url:'http://localhost:8080/g',
type:'post',
data:{'f':'f'},
dataType: "jsonp",
jsonp: "callback",//傳遞給請求處理程式或頁面的,用以獲得jsonp回撥函式名的引數名(一般預設為:callback)
jsonpCallback:"showData",//自定義的jsonp回撥函式名稱,預設為jQuery自動生成的隨機函式名,也可以不寫這個引數,jQuery會自動為你處理資料
success: function(data){
console.log(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("伺服器異常");
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(XMLHttpRequest.responseText);
alert(textStatus);
alert(errorThrown);
console.log(textStatus);
}
});
}
//回撥函式
function showData (result) {
var data = JSON.stringify(result); //json物件轉成字串
console.log(data);
}
【Java後端】
@RequestMapping("/hello")
@ResponseBody
public void hello(HttpServletRequest request, String f,HttpServletResponse response) throws IOException{
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//這裡寫自己的邏輯過程
//前端傳過來的回撥函式名稱
String callback = request.getParameter("callback");
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("path", path);
//用回撥函式名稱包裹返回資料,這樣,返回資料就作為回撥函式的引數傳回去了,callback()這個()裡面放的是json格式
String str = callback + "(" + new Gson().toJson(resultMap) + ")";
response.getWriter().write(str);
}