使用jquery实现跨域访问

因为项目需要,需要跨域获取数据,现提供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




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值