Ajax跨域請求——jsonp獲取json資料
阿新 • • 發佈:2019-02-19
JSONP(JSON with Padding)是JSON的一種“使用模式”,可用於解決主流瀏覽器的跨域資料訪問的問題;
例如在同一個系統中,我們進行了分散式分域名的部署,但是在這個域裡面,我們需要通過ajax的方式去訪問獲取另一個域的資料,這時就產生的跨域的請求,但是瀏覽器出去安全考慮,是不允許進行跨域請求的;
json與jsonp的區別:json是一種資料傳輸格式,而jsonp則是資料傳輸的協議或者是說方式。
直接碼程式碼:
前端頁面使用jquery進行ajax請求,當然使用js進行ajax請求的可以自行對應修改:
我們的dataType必須為jsonp,然後比以往常規的ajax請求多了一個jsonp引數,這個引數是用來獲取後臺服務端返回的資料的;$.ajax({ type:'POST', url: 'www.xxx.com/goods/countGoodsNumByCategoryId.json', data:{"categoryId":id}, dataType:'jsonp', async:false, jsonp:'jsonpCallback',//傳遞給後臺程式,用來獲取jsonp回撥函式名的引數名 success:function(data){ var isExistGoods = data.isExistGoods; var isNeedChooseCategory = data.isNeedChooseCategory; if(isExistGoods == 1){ alertMsg.error("該類目下已存在商品,不能刪除!"); } if(isNeedChooseCategory == 1){ alertMsg.error("請選擇一個類目!"); } }, error:function(){ alertMsg.error("該類目下已存在商品,不能刪除!"); } });
服務端java程式碼:
@RequestMapping({ "/countGoodsNumByCategoryId.json" }) public void countGoodsNumByCategoryId(HttpServletRequest request, HttpServletResponse response) { response.setContentType("text/plain"); response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); Map<String, Object> paramsMap = new HashMap<String, Object>(); Long categoryId = null; Map<String, Object> resultMap = new HashMap<String, Object>(); String categoryIdJson = request.getParameter("categoryId"); if (StringUtils.isNotBlank(categoryIdJson)) { categoryId = Long.parseLong(categoryIdJson); paramsMap.put("categoryId", categoryId); int goodsNum; try { goodsNum = goodsService.selectCount(paramsMap); if (goodsNum > 0) { resultMap.put("isExistGoods", BoolStatus.YES); } else { resultMap.put("isExistGoods", BoolStatus.NO); } } catch (ServiceException e) { LOG.error(e.getMessage(), e); resultMap.put("isExistGoods", BoolStatus.YES); } } else { resultMap.put("isNeedChooseCategory", BoolStatus.YES); } try { PrintWriter out = response.getWriter(); JSONObject resultJSON = JSONObject.fromObject(resultMap); // 根據需要拼裝json String jsonpCallback = request.getParameter("jsonpCallback");// 客戶端請求引數 out.println(jsonpCallback + "(" + resultJSON.toString(1, 1) + ")");// 返回jsonp格式資料 out.flush(); out.close(); } catch (IOException e) { LOG.error(e.getMessage(), e); } }
上面這個程式碼片段,有些是我自己進行了工具類封裝的,根據意思大家就能明白是起什麼作用的。
返回資料是通過response的流來進行直接返回的,這裡從request中間獲取了一個jsonpCallback,這個跟我們的前臺ajax那個jsonp引數是對應的,大家可以自行修改成自己喜歡的名稱。
然後這樣我們就完成了,跨域情況下的ajax請求。