ajax 跨域访问

最新推荐文章于 2022-01-05 17:28:34 发布

原创最新推荐文章于 2022-01-05 17:28:34 发布 · 653 阅读

1 ·

CC 4.0 BY-SA版权

java 同时被 2 个专栏收录

32 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文介绍了一次实际项目中实现跨域请求的过程。采用JSONP方式完成从前端到后端的跨域数据交互，并展示了具体的前端请求及后端响应代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前一直只知道有跨域这一说，但并没有在项目中实战过。就在昨日有一个小需求就需要用到跨域。因此将实战的结果记录下。

跨域原理：ajax不能请求非当前服务之外的服务。

具体步骤

1：引入jquery

2：前端请求代码

$.ajax({
	type:"POST",
	dataType:"jsonp",
	cache:false,
	jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
	jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
	data:{"keyword":keyword,"entry":20},
	url:"http://21.179.197.101:84/tyjs/searchFirst2.do",
	success:function(resultData){
		alert(resultData);
	}
});

3：后端接收代码
说明
1:参数callbackparam就是前端定义的参数名，这是约定的参数名哦
2:然后通过参数名callbackparam获取到的值就是前端定义的 jsonpCallback值
3:后端响应数据格式: 参数名callbackparam的值(要响应的数据格式,也就是前端要接收的数据格式)
4:后端响应格式就要设置为text/plain非json了哦。前端可以写json，会自动转换

  @ResponseBody
  @RequestMapping("/searchFirst2")
  public void searchFirst2(String callbackparam, SearchView sv, Paging<Info> paging,
      HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/plain;charset=utf-8");
    String keyword = sensitiveWordUtlis.filterInfo2(sv.getKeyword());
    sv.setKeyword(keyword);
    if (StringUtils.isNotEmpty(keyword)) {
      searchService.count(sv.getKeyword());
      try {
        searchService.searchFirst(paging, sv);
      } catch (Exception e) {
        logger.error(e);
      }
    }
    String jsonData = JsonMyUtil.object2json(paging);
    jsonData = String.format("%s(%s)", callbackparam, jsonData);
    resp.getWriter().print(jsonData);
    resp.flushBuffer();
  }

参考前辈的经验（里边有介绍到原理）

http://www.cnblogs.com/know/archive/2011/10/09/2204005.html