美文网首页
SSM项目结合jsonp(ajax跨域解决)

SSM项目结合jsonp(ajax跨域解决)

作者: 简书mhy | 来源:发表于2018-10-31 17:29 被阅读0次

    废话不多说,直接上代码。
    前端使用ajax

    function showData(data){    //执行回调函数
         console.info("调用showData");
         var result = JSON.stringify(data);
         $("#text").val(result);
    }
    
    $.ajax({
              url: "http://192.168.1.66:8080/hsisp/externalCheckname.do",
              type: "GET",   
              async: false,
              data: {'username':username},
              dataType: "jsonp", //指定服务器返回的数据类型
                  //jsonp: "callback",   //指定参数名称,默认是callback,后台拼接上需要接受此参数信息,jquery会帮我们处理     
                  //jsonpCallback: "showData",  //指定回调函数名称(可以不用,感觉用处不大)       
              success: function (data) {
                  if(data=="0"){
                        alert("会员用户名已经被占用!");
                        $("#username").val("");
                  }
              },
              error:function(){
                alert("服务器繁忙");
              }
          });
    

    请求路径

    http://192.168.1.66:8080/hsisp/externalCheckname.do?callback=jQuery183046368776407660106_1550110668195&username=ocean&_=1550110685332
    

    后台代码,需要接受callback参数(可根据js自行定义,默认是callback)

    @RequestMapping("/externalCheckname")
        public void checkUsername(String username,HttpServletRequest request,HttpServletResponse response) throws Exception{
                  // * 表示允许任何域名跨域访问
                   response.setHeader("Access-Control-Allow-Origin", "*");
                  // 指定特定域名可以访问
                   response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");
            //前端传过来的回调函数名称    
            String callback = request.getParameter("callback");
            //用回调函数名称包裹返回数据,这样,返回数据就作为回调函数的参数传回去了
            String result = "";
            Member member=memberService.checkname(username);
            int i=userService.selectUserByUname(username);
            if(member!=null||i>0){
                result = callback + "(" + 0 + ")";
            }else{
                result = callback + "(" + 1 + ")";
            }
            response.getWriter().print(result);
        }
    

    jsonp方式不支持POST方式跨域请求,就算指定成POST方式,会自动转为GET方式;而后端如果设置成POST方式了,那就请求不了了。

    jsonp为动态的script,没有同源策略,所以只能是get

    注意1:

    **后台使用拼接的 json数据的时候,有两种做法
    1.手动拼接,借助response
    2.后台构建实体类,@responseBody这个实体类
    eg:实体类

    private boolean success//是否成功
    private Object msg;//消息
    private Object obj //其他对象
    

    **

    注意2:

    springmvc4.1以上版本支持jsonp用法,用法如下

    
    @Controller
    public class CategoryController {
     
        @Autowired
        private CategoryService categoryService;
     
        @RequestMapping("-----")
        @ResponseBody
        public Object getItemCatList(String callback) {//callback根据js自行修改
            CatResult catResult = categoryService.getCategoryList();//返回的数据
            MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
            mappingJacksonValue.setJsonpFunction(callback);
            return mappingJacksonValue;
        }
    

    相关文章

      网友评论

          本文标题:SSM项目结合jsonp(ajax跨域解决)

          本文链接:https://www.haomeiwen.com/subject/bywatqtx.html