JSONP实现跨域

JSONP实现跨域

1.AJAX跨域访问

<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        alert("测试访问开始!!!!!")
        
        $.ajax({
            url:"http://manage.jt.com/web/testJSONP",
            type:"get",
            dataType:"jsonp",       //返回值类型callback(data)
            //jsonp: "callback",   //指定参数名称
            //jsonpCallback: "hello",  //指定回调函数名称
            success:function (data){
                alert(data.id);
                alert(data.name);
                //转化为字符串使用
                //var obj = eval("("+data+")");
                //alert(obj.name);
            }    
        });    
    })
</script>

2.后端

@Controller
public class JSONPController {
    
    
    //http://manage.jt.com/web/testJSONP?callback=jQuery111104246765155397203_1541993772596&_=1541993772597
    //@RequestMapping(value="/web/testJSONP",produces="text/html;charset=utf-8")
    //@ResponseBody
    public String testJSONP(String callback) throws JsonProcessingException{
        ObjectMapper objectMapper = new ObjectMapper();
        //String json = "{'id':'1',"name":"tomcat"}";
        User user = new User();
        user.setId(100);
        user.setName("王思聪吃热狗");
        user.setAge(30);  
        
        String json = objectMapper.writeValueAsString(user);
        return callback + "(" + json +")";
    }
    
    //利用工具类形式实现JSONP
    @RequestMapping(value="/web/testJSONP")
    @ResponseBody    
    public MappingJacksonValue utilJSONP(String callback){
        
        User user = new User();
        user.setId(100);
        user.setName("王思聪吃热狗");
        user.setAge(30);
        MappingJacksonValue value =
                new MappingJacksonValue(user);
        value.setJsonpFunction(callback);
        return value;
        
    }
}