springmvc+jsonp解决跨域问题

1、服务端:

    @RequestMapping("/gateway/testJsonp")
    @ResponseBody
    public Object testJsonp(@RequestParam(value = "callback", required = false) String callback) {
        if (StringUtils.isBlank(callback)){
            return "noJsonp";
        }
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue("this is return jsonp result value!");
        mappingJacksonValue.setJsonpFunction(callback);
        return mappingJacksonValue;
    }

2、客户端ajax:

<!DOCTYPE html>
<html>
<head>
<title>跨域请求和JSONP解决跨域</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.7.1.js"></script>
</head>
<body>
<h3>点击下面按钮</h3>

<button id="nojsonp">点我,没有jsonp</button>

<button id="jsonp">点我,jsonp解决跨域</button>

<script>

$("#nojsonp").click(function(){
    $.ajax({
        type:"post",
        url:"http://localhost:8080/smp-csg//gateway/testJsonp",
        dataType:"json",
        success:function(data){
            alert(data);
        },
        error:function(e){
            alert(e.status);
        }
    });
})
$("#jsonp").click(function(){
    $.ajax({
        type:"post",
        url:"http://localhost:8080/smp-csg//gateway/testJsonp",
        dataType:"jsonp",
        jsonpCallback:"jsonpCallback",
        success:function(data){
            alert("success function:"+data);
        },
        error:function(e){
            alert(e.status);
        }
    });
})
//该方法存在,则先调用该方法再调用ajax中的success方法,不存在则直接执行ajax中的success方法
function jsonpCallback(data){
    alert("callbackFunc:"+data);
}
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/zuoyanyouyan/article/details/78052255
今日推荐