jsonp跨域

一、什麼是jsonp?jsonp與json有什麼聯繫嗎?javascript

jsonp是支持跨域的方式(能夠返回回調名+json的形式)html

json與jsonp毫無聯繫。一種是數據格式,一種是跨域方式前端

參考文檔:java

http://kb.cnblogs.com/page/139725/jquery

代碼參考文檔(Spring MVC、ajax):web

http://www.open-open.com/lib/view/open1430094913490.htmlajax

二、前端代碼spring

一、jquery的ajax直接請求
$.ajax({ //跨域調用
        url: "http://127.0.0.1:8085/hollympwechat-web/rest/jsonpRest/test", //接口地址
        type: 'get', //請求方式
        data: {},//json參數
        async: false,
        dataType: "jsonp",
        jsonp: "callbackparam", //服務端用於接收callback調用的function名的參數
        jsonpCallback: "success_jsonpCallback", //callback的function名稱,服務端會把名稱和data一塊兒傳遞回來
        success: function(data) { //響應成功的回調函數
            if (data != null) {
               //回調操做
                alert(data);
            
            }
        }
    });
二、angular.js封裝
var app = angular.module('cmpDetail', []);
app.controller("formCtrl", function($scope, $http) {
    $scope.userData = {};
    $scope.dataurl = "http://127.0.0.1:8085/hollympwechat-web/rest/jsonpRest/test?callback=JSON_CALLBACK";
    $http.jsonp($scope.dataurl,$scope.userData)
    .success(
        function(data) {
        	alert(data);
        }
    )
    .error(
        function(data) {
             alert("Jsonp請求失敗");
        }
    );
});

三、後端代碼json

一、Spring MVC原生
@RequestMapping("/test")
@ResponseBody
public JSONPObject get(HttpServletRequest req,HttpServletResponse res) {

	String callbackFunName =req.getParameter("callback");//獲得js函數名稱
	ServiceResult sr = new ServiceResult();   
	sr.setContent("chenyao");
	sr.setSuccess(true);
	    	 
	JSONPObject jsonp = new JSONPObject(callbackFunName);
	jsonp.addParameter(sr);
	return jsonp;
}

//注意:一、ServiceResult是封裝的返回數據類而已,咱們這裏能夠本身定義json
       二、JSONPObject是com.alibaba.fastjson.JSONPObject下的JSON
       三、返回的時候必須加上回調函數,這樣會改變對返回值的封裝(都是返回ServiceResult)
二、藉助Spring MVC的模型類
<bean id="mappingJackson2JsonView"
		class="org.springframework.web.servlet.view.json.MappingJackson2JsonView">
		<property name="jsonpParameterNames">
			<set>
				<value>jsonp</value>
				<value>callback</value>
			</set>
		</property>
</bean>

直接返回想要數據(ServiceResult)
@RequestMapping("/test")
@ResponseBody
public ServiceResult get(HttpServletRequest req,HttpServletResponse res) {  
	ServiceResult sr = new ServiceResult(); 
	sr.setContent("chenyao");
	sr.setSuccess(true);  	    	
	return sr;    	
}

總結:簡單來講,就是你想用ajax請求不是你本項目內的接口,那麼須要jsonp的方式進行跨域請求後端

相關文章
相關標籤/搜索