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

废话不多说,直接上代码。
前端使用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;
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容