环境:
前端:Jquery + AJax
后台:SpringMVC
实现思路:前端传入一个JS回调函数名,后台将数据转换为字符串,并用函数名包裹起来,组成一个函数的形式返回前端,前端的回调函数就可以接收到返回的数据。
前端调用:
function onBack(data){
alert(JSON.stringify(data))
}
$.ajax({
url: 'http://192.168.22.105:8081/KingQuery/api/test/stu',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "onBack", // 自定义回调函数名
data: {}
});
注意点是Ajax请求中的dataType是jsonp,jsonpCallback为已经定义好的回调函数名。
后台(以SpringMVC框架为例):
在请求的Controller类或者方法的@requestMapping注释上添加 produces = {"text/javascript;charset=UTF-8"}属性,这样返回的数据类型为text/javascript,charset设置为UTF-8是为了解决中文返回前端后乱码的问题。
@RestController
@RequestMapping(value = "/workshop", produces = {"text/javascript;charset=UTF-8"})
public class DataWorkShopRest {
方法示例:
@RequestMapping("/serviceapp")
public String getServiceAppWorkShopDetail(HttpServletRequest request) {
String callback = request.getParameter("callback");
try {
ServiceAppWorkShop data = serviceAppWorkShopRest.getData();
return callback+"(" +JSONObject.toJSONString(Result.success(data)).toString() +")";
} catch (Exception e) {
e.printStackTrace();
}
return callback+"(" +JSONObject.toJSONString(Result.error(new HeadMsg(500, "服务器内部错误"))).toString() +")";
}
这里主要是接收前端传入的callback参数,将需要返回的数据转换为字符串格式,用函数名包裹返回即可。
跨域问题的解决并不只有JSONP一种方案,可以查阅其他的相关文章。