打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
ajax跨域请求
ajax请求代码:

  //区域事件选择配送点function changeDistrict(value){ if(value == 0){ $('#transport_node').empty(); $('#transport_node').append('请选择'); return; } $('#transport_node').empty(); $('#transport_node').append('加载中...'); $.ajax({type: 'GET',url: 'http://192.168.33.114:8080/UIDTraceAdmin/transportnode/pagelist/jsonp?callbackFunction=jsonpCallback',async: false,dataType: 'jsonp',jsonp: 'jsonpCallback',//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)success: function(o){},timeout:3000 }); }function jsonpCallback(result) { if(result.success == true){ $('#transport_node').empty(); $('#transport_node').append('请选择');$.each(result.transportList, function(i, n){ var html = ''+n.transportnodeName+''; $('#transport_node').append(html) }); }else{ $('#transport_node').empty(); $('#transport_node').append('请选择'); } }

  要点:

  1.url中的请求参数callbackFunction=jsonpCallback这是服务器响应返回后调用的javascript方法的名称

  2.dataType要为jsonp

  跨域服务器处理代码:

  @RequestMapping('/pagelist/jsonp')public void pagelist(@ModelAttribute TransportNode node,HttpServletRequest httpReq,HttpSession session,HttpServletResponse response) {//返回头部设置 response.setHeader('Pragma', 'No-cache'); response.setHeader('Cache-Control', 'no-cache'); response.setHeader('Content-type', 'application/x-javascript;charset=utf-8');response.setDateHeader('Expires', 0); String jsonpCallback = httpReq.getParameter('callbackFunction');//jsonp回调函数名 JSONObject resultJson = new JSONObject(); PrintWriter out = null; try {out = response.getWriter();} catch (IOException e1) {e1.printStackTrace();} try {node.setRowStart((node.getPage() - 1) * node.getRows() + 1);node.setRowEnd(node.getPage() * node.getRows()); resultJson.put('transportList', JsonUtils.toJSONList(business.getList(node)));resultJson.put('success', true); System.out.println(resultJson.toString());out.println(jsonpCallback+'('+resultJson.toString()+')');//返回jsonp格式数据 out.flush(); out.close(); } catch (Exception e) {LogWriter.log('/pagelist/jsonp',e);try {resultJson.put('success', false);} catch (JSONException e1) {e1.printStackTrace();} out.println(jsonpCallback+'('+resultJson.toString()+')');//返回jsonp格式数据 out.flush(); out.close(); }

  注意要点:

  1.设置响应报文头,response.setHeader('Content-type', 'application/x-javascript;charset=utf-8');,消除了'Resource interpreted as Script but transferred with MIME type text/plain',同时要根据自己的编码格式设置正确的编码;

  2.jsonp的数据格式是:jsonpCallback+'('+resultJson.toString()+')'

  举个例子:

  jsonpCallback({

  'code': 'aaa',

  'price': 1780,

  'tickets': 5

  });
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
AngularJS实现跨域请求
jQuery源码分析系列(35) : Ajax
ajax 跨域请求(后端语言为 Java)
关于jquery跨域请求方法
jsonp与JAVA的配合使用
深入剖析jsonp跨域原理
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服