1. 程式人生 > >springmvc+jsonp解決跨域問題

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>