*jsonp 主要是利用
<script src=“http://IP:端口号/”></script>
来进行跨域;可以解决兼容性的问题
利用<script>标签的跨域功能,同时要求后台返回的数据应该是以方法调用形式进行返回
<script src=“http://localhost:端口/jquery.js”>
回调函数(data);
</script>*
执行的成功在于这里
response.getWriter().write(“alert(123)”);//返回信息
response.getWriter().flush();
response.getWriter().close();
后台返回json数据
@RequestMapping("/login1")
@ResponseBody
public String ll(HttpServletResponse response,HttpServletRequest request) throws IOException {
Subject subject = SecurityUtils.getSubject();
UUser principal = (UUser)subject.getPrincipal();
String s= JSONObject.toJSONString(principal);//获取用户信息
response.getWriter().write("var uuser="+s);//返回信息
response.getWriter().flush();
response.getWriter().close();
return null;
}
前端用 script标签接受演示如下
<!-- 接口信息 http://localhost:8081/test/login1-->
<script src="http://localhost:8081/test/login1"></script>
<!-- 打印jsonp 中的 uuser 数据-->
<script> console.log(uuser)</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello word
</body>
</html>
图片详情 可以看出 信息已取回 输入uuser 返回 后台的用户信息
返回数据
var uuser{"createTime":940348800000,"email":"email","id":1,"lastLoginTime":940438800000,"nickname":"admin","pswd":"4297f44b13955235245b2497399d7a93","status":1}
输入 uuser.nickname 返回用户名 admin
后台 返回jsonp 返回 来执行 js函数
@RequestMapping("/login2")
@ResponseBody
public String lll(HttpServletResponse response,HttpServletRequest request) throws IOException {
response.getWriter().write("alert(123)"); //返回浏览器执行 js函数
response.getWriter().flush();
response.getWriter().close();
return null;
}
前台加上 script 标签
<script src="http://localhost:8081/test/login2"></script>
执行成功
案例返回 js函数
@RequestMapping("/login3")
@ResponseBody
public String login3(HttpServletResponse response,HttpServletRequest request) throws IOException {
response.setCharacterEncoding("utf-8");
//执行下js jsonp1里的 doucment.write() 函数 jsonp2 再次执行 jsonp1函数
response.getWriter().write("function jsonp1() {\n" +
" document.write(\"我是JSONP\");\n" +
" };"+
" function jsonp2() {\n" +
" jsonp1();" +
" }");
response.getWriter().flush();
response.getWriter().close();
return null;
}
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello word
<script src="http://localhost:8081/test/login3">
//jsonp请求发送
</script>
</body>
</html>
jsonp1() 执行 浏览器 打印出 “我是jsonp”
jsonp2() 函数执行 调动 jsonp1函数 调动 打印成功
如有错误请指示