后端代码
package com.sptiomap.llepds.workflow.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
public class HanCoRs implements HandlerInterceptor{
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
response.setHeader("Access-Control-Allow-Credentials","true"); //是否允许浏览器携带用户身份信息(cookie)
return true;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
// TODO Auto-generated method stub
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
throws Exception {
// TODO Auto-generated method stub
}
复制代码
后端代码return "message("+json+")";
前端代码
方法一
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>test</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://encounter.christmas023.space/json.php?name=mavis&age=18",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"message",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){
alert('你的名字:' + json.name + ' 年龄: ' + json.age);
},
error: function(){
alert('fail');
}
});
});
</script>
</head>
<body>
</body>
</html>复制代码
type
:请求类型,GET 或 POST,默认为 GET;async
:true(异步)或 false(同步),默认情况下为true,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行;url
:发送请求的地址(跨域请求时应为绝对地址);dataType
:指定服务器返回的数据类型;jsonpCallback
:自定义JSONP回调函数名称;success
:请求成功后回调函数;error
:请求失败时调用此方法。
服务器返回的数据类型:
返回一个指定函数名为message
的回调函数,函数里面包裹的数据为JSON
格式。
方法二
$.ajax({ url: 'http://localhost:8080/llepds//llepdsWorkFlow/getCurrentWorkList.do?userName=dfs1', type: 'GET', dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "message", // 自定义回调函数名 data: {}, success: function(result){ console.log(result) }, error:function(err){ console.log(err); } }); function message(res) { console.log(JSON.stringify(res)); }复制代码
方法三
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://localhost:8080/llepds//llepdsWorkFlow/getCurrentWorkList.do?userName=dfs1&callback=message';
document.head.appendChild(script);
// 回调执行函数
function message(res) {
console.log(JSON.stringify(res));
}