使用jquery实现跨域访问

最新推荐文章于 2020-10-23 13:35:01 发布

tree3170

最新推荐文章于 2020-10-23 13:35:01 发布

阅读量804

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/tree3170/article/details/9198605

版权

JQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

因为项目需要，需要跨域获取数据，现提供2种方法（两种方法都是只能用get，使用jsoup）：

什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

第一种ajax请求：

/**
*ajax跨域访问（需要后台操作）
*callbackparam：指定参数名
*success_jsonpCallback：指定返回function对象名
*/
function ajaxFC(){
		var url="http://172.17.16.25:8380/suite/ForwordToPlugINSingleCodeTableAction.do?method=fetchEmbedUI&codeTableName=CURRENCY&key=A12B561B91C8CD9CD3C47650AAF9064B&response2curWindow=true";
		$.ajax({
			type : "get",
			url : url,
			dataType : "jsonp",
			jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
			jsonpCallback:"success_jsonpCallback",//callback的function名称
			success : function(json){
				$("#abc").append($("<option/>").val("").text("--- Please Select ---"));
				for(var id in json){
				$("#abc").append($("<option/>").val(json[id]).text(json[id]));
					//alert(json[0][id])
				}
			},
			error:function(){
				alert('fail');
			}
		})
}

真正返回的地址：http://172.17.16.25:8380/suite/ForwordToPlugINSingleCodeTableAction.do?method=fetchEmbedUI&callbackparam=success_jsonpCallback

真正返回的参数：success_jsonpCallback({"cc0":"EUR","cc1":"GBP","cc2":"HKD","cc3":"RMB","cc4":"USD"})

第二种$.getJSON：

/**
*getJson跨域访问
*返回URL：http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=jQuery1910270406411231093_1372650308478&tags=mount+rainier&tagmode=any&format=json&_=1372650308479
*jsoncallback指定参数名
*/
function getJson1(){
	 var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
  .done(function( data ) {
    $.each( data.items, function( i, item ) {
      $( "<img/>" ).attr( "src", item.media.m ).appendTo( "#images" );
      if ( i === 3 ) {
        return false;
      }
    });
  });
}

后台：

String codeTableName = request.getParameter("codeTableName");
            CodeTableManager manager = new CodeTableManager();
     		//get all common codes 
     		CommonCode[] codes = manager.getCodeTable(codeTableName).getCommonCodes();
     		Map<String,Object> result=new TreeMap<String,Object>();
     		Collections.sort(Arrays.asList(codes));
     		int i = 0 ;
     		for(CommonCode cc :codes){
     			result.put("cc" + i, cc.getCode());
     			i++;
     		}
        	ObjectMapper objectMapper=new ObjectMapper();
        	String out = objectMapper.writeValueAsString(result);
        	
        	String jsonCallBack = request.getParameter("callbackparam");
            response.setContentType("text/xml;charset=utf-8");
            response.getWriter().print(jsonCallBack + "("+out+")");
      	    return mapping.findForward("");

下载连接：JqueryCrossDomainRequest