ajax跨域請求結合springmvc後臺程式碼學習整理
阿新 • • 發佈:2019-01-04
ajax跨域請求,在工作中遇到使用ajax發起請求獲取資料,但是請求的資料不在同一個域下,這樣子就要使用到ajax的跨域請求了!
我使用的框架 SpringMVC,我在PC端的專案裡面寫一個介面方法,但是在wap專案中也要用改介面!下面貼出示例程式碼:
(1):前臺請求程式碼
①:正常請求(不跨越)
$.ajax({
url:'${pageContext.request.contextPath}/dufy/test',
type:'get',
data:{data:data},
dataType:'json',
success:function(data) {
//do something...
},
error: function(data){
//do something...
}
})
也可以使用
②: 跨域請求
$(function(){
$.ajax({
type:'get',
url : '${pageContext.request.contextPath}/dufy/test',
data:{data:data},
dataType : 'jsonp' ,
jsonpCallback: 'callback',
success : function() {
//do something...
},
error : function(data) {
//do something...
}
});
})
function callback(data){
var jsonobj = eval('(' + data + ')');
if(jsonobj.orderCount!=""){
//do something...
}
}
(2):後臺程式碼
@RequestMapping(value="/dufy/test",method=RequestMethod.GET)
@ResponseBody
public void test(HttpServletRequest request,HttpServletResponse response){
response.setHeader("P3P", "CP=CAO PSA OUR");
response.addHeader("Access-Control-Allow-Origin", "*");
String data = request.getParameter("data");
//1:業務邏輯
JSONObject returnMap = new JSONObject();
if(StringUtil.isEmpty(data)){
returnMap.put("state", "error");
}else{
returnMap.put("state", "success");
}
//2:輸入json資料到前臺頁面
PrintWriter pWriter = null;
try {
pWriter = response.getWriter();
String type = request.getParameter("type");
if("pc".equals(type)){
pWriter.write(returnMap.toJSONString());
}else if("wap".equals(type)){
pWriter.write("callback('" + returnMap.toJSONString() + "')");
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}finally{
if(pWriter!=null){
pWriter.flush();
pWriter.close();
}
}
}
在使用過程注意:後臺程式碼中的 callback要與前期臺呼叫 jsonpCallback: ‘callback’, 對應!
但是實際過程中又遇到新的問題,這個callback不能直接後臺硬編碼寫死!要不前臺如果有兩個以上的請求在js中寫兩個function callback() 就會有錯誤!函式名稱相同了,那麼怎麼解決這個問題呢?
優化一下後臺的程式碼:
...
//優化程式碼:新增後臺獲取callback
String callback = request.getParameter("callback");
...
//優化程式碼
pWriter.write(""+callback+"('" + returnMap.toJSONString() + "')");
//之前前程式碼
pWriter.write("callback('" + returnMap.toJSONString() + "')");
這樣子就實現了動態化!