ajax前台後台跨域請求處理方式-js教程-PHP中文網

本篇文章透過ajax前台跨域請求處理以及後台跨域的資料處理方式介紹，詳細分析了ajax跨域的問題，對ajax前台後台跨域請求處理方式需要的朋友學習下本篇文章。

最近一直在搞公眾號前台開發，遇到了ajax跨域請求的問題，像地區的省-市-縣三級聯動、汽車品牌-車系-車款的三級聯動查詢等都需要呼叫外部介面(其他工程項目的介面)完成。以下就分享一下個人解決跨域請求的方案，當然是在後台程序猿大哥的幫助下，我才弄清楚了其中的淵源，趕緊記錄下來慢慢積累，也希望對大家能有所幫助，還請積極提出意見或建議。

跨域請求需要藉助後台代碼接收callback回呼函數，對json資料進行進一步處理；前台再用ajax請求向伺服器發送callback參數，並指定資料格式為jsonp。

一、後台對跨域請求進行處理

1.CarBrandController.java(汽車品牌介面java檔)，這裡列出的方法主要用來根據不同的level值查詢對應的品牌、車系、車款，在這裡對跨域請求做一個接收回調函數的處理，如果返回的callback為null,則不是跨域請求，不需要做特殊處理，直接打印json接口數據即可；如果傳回的callback不為null，表示跨域請求，這時要對json資料做一個特殊處理，即在json資料的外層加一對小括號包起來，具體請看HttpAdapter.java檔中的printlnJSONObject方法。

public void json(HttpServletRequest request,HttpServletResponse response){ Mapmap=new HashMap(); String id = request.getParameter("id"); //接收ajax请求带过来的id String level = request.getParameter("level"); //接收ajax请求带过来的level String callback=request.getParameter("callback"); //接收ajax请求带过来的callback参数 if ("1".equals(level)) { //如果level是'1',则查询第一级目录内容 map.put("results", this.carBrandService.findByAttr(null, "first_letter asc")); //调用查询方法，结果放入map } else if ("2".equals(level)) { //如果level是'2',则查询第二级目录内容 map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//调用查询方法，结果放入map } else if ("3".equals(level)) { //如果level是'3',则查询第三极目录内容 map.put("results", this.carModelYearService.findByAttr("parent_id="+id, "jian_pin desc"));//调用查询方法，结果放入map } map.put("level",level); if (null==callback) { //如果接收的callback值为null,则是不跨域的请求,输出json对象 HttpAdapter.printlnObject(response, map); }else{ //如果接收的callback值不为null,则是跨域请求，输出跨域的json对象 HttpAdapter.printlnJSONPObject(response, map, callback); } }

登入後複製

2.HttpAdapter.java(輸出物件的java檔)，printlnObject方法列印正常json字串；printlnJSONObject方法對json字串進行了特殊處理。

/** * 打印对象 * @param response * @param object */ public static void printlnObject(HttpServletResponse response,Object object){ PrintWriter writer=getWriter(response); writer.println(JSON.toJSONString(object)); } /** * 打印跨域对象 * @param response * @param object */ public static void printlnJSONPObject(HttpServletResponse response,Object object,String callback){ PrintWriter writer=getWriter(response); writer.println(callback+"("+JSON.toJSONString(object)+")"); }

登入後複製

二、前台ajax跨域請求資料

寫法1：向伺服器發送一個參數callback=？，同時指定dataType為'jsonp'的格式，跨域請求時指定的資料格式必須是jsonp的形式。

function loadData(obj,level,id,value){ $.ajax({ url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id+'&callback=?', //将callback写在请求url后面作为参数携带 type:'GET', async:false, dataType:'jsonp', success:function(data){ console.log(data); //其他处理(动态添加数据元素) }); }

登入後複製

寫入法2：callback不需要寫在url中，但是要指定jsonp參數為'callback'，並給jsonpCallback參數一個值。

function loadData(obj,level,id,value){ $.ajax({ url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id, type:'GET', dataType:'jsonp', jsonp: 'callback', //将callback写在jsonp里作为参数连同请求一起发送 jsonpCallback:'jsonpCallback1', success:function(data){ console.log(data); }); }

登入後複製

以上兩種寫法的意思是一樣的，只是寫法不同罷了。

接下來補充jsonp的工作原理。