分布式架构项目中各模块中页面发送ajax请求后台json数据的传输问题
2017-12-08 14:14
706 查看
传统的单模块项目中,我们页面通过ajax异步请求可以直接请求到后台返回的json字符串。但是在多模块项目中,由于域名不同,或者是端口不同,向后台发送ajax请求数据时,会产生跨域问题。
例如电商网站的前台系统调用服务系统返回的商品分类导航,前台系统发布在了一台服务器上,服务系统发布在了另一台服务器,所以导致了ajax跨域请求数据失败。
解决方案:
服务系统处理:
例如电商网站的前台系统调用服务系统返回的商品分类导航,前台系统发布在了一台服务器上,服务系统发布在了另一台服务器,所以导致了ajax跨域请求数据失败。
解决方案:
前台系统的入口为:localhost:8082/ 服务系统的入口为:localhost:8081/rest
//请求路径 category={ BASE_URL:"http://localhost:8081/rest/category/list?callback=fillCategory" };
//页面加载调用此方法,向服务系统发送jsonp请求,并传入一个参数(方法名)callback=fillCategory用于服务层封装json数据成 fillCategory(数据),也就是方法名(数据);的形式 用于覆盖前台页面定义好的回调函数。 function ReaderCategory(){ $.ajax({ url:category.BASE_URL, type: "post", //指定数据类型为jsonp dataType: "jsonp", //指定回调函数为:fillCategory jsonpCallback: 'fillCategory' }); }
//定义好回调函数,后台返回的数据会覆盖此方法填充数据 function fillCategory(data){ alert(data); }
服务系统处理:
package com.ejavashop.rest.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.MediaType; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import com.ejavashop.common.utils.JsonUtils; import com.ejavashop.rest.service.CategoryService; /** * * @ClassName: CategoryController * @Description: TODO(商品分类信息的控制器) * @author 欧阳理 * @date 2017年12月5日 上午11:22:00 * */ @Controller public class CategoryController { @Autowired private CategoryService categoryService; @RequestMapping(value="/category/list",produces=MediaType.APPLICATION_JSON_VALUE+";charset=utf-8;") @ResponseBody public String categorylist(@RequestParam("callback")String callback)throws Exception{ //调用后台mapper查询数据 CategoryResult strJson=categoryService.getCategoryById(); //将数据封装到MappingJackson对象 MappingJacksonValue result = new MappingJacksonValue(strJson); //封装回调函数方法名+数据 result.setJsonpFunction(callback); return result; } @RequestMapping("/demo") public String demo(){ return "index"; } }
相关文章推荐
- jquery+ajax每秒向后台发送请求数据然后返回页面的代码
- 在使用ajax向后台发送json数据,存在格式不正确的问题
- Ajax在静态页面中向指定url发送json请求获取返回的json数据
- 通过Ajax请求后台数据,返回JSONArray(JsonObject),页面(Jquery)以table的形式展示
- jqury+ajax每秒向后台发送请求数据然后返回页面(包括jqruy页面加载完毕才执行方法)
- ajax提交相同url,重复发送请求后台,页面无更新的问题解决
- jquery+ajax每秒向后台发送请求数据然后返回页面的代码
- Java后台发送Post请求,数据传输格式JSON
- 发送ajax请求的时候,如果页面卡住,可能是data数据的问题。
- 从jsp页面发送ajax请求,servlet接受参数并返回json数据
- jquery+ajax每秒向后台发送请求数据然后返回页面的代码
- ajax请求数据,Json返回到页面的数据出现中文乱码问题。
- 有关用AJAX发送json数据到后台的问题总结
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- 发送Ajax请求获取JSON格式数据
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
- Apache页面压缩配置问题导致json数据传输时间延长
- 关于解决JQuery发送Ajax请求后,IE缓存数据不更新的问题
- 初涉Ajax,以post或get方法发送数据,以json或xml形式接收服务器返回的请求
- 关于解决JQuery发送Ajax请求后,IE缓存数据不更新的问题