记录下--java返回jsonp案例梳理

最新推荐文章于 2022-03-12 09:00:00 发布

MM.Yang

最新推荐文章于 2022-03-12 09:00:00 发布

阅读量538

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_43157978/article/details/104945651

版权

*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函数调动打印成功

如有错误请指示

MM.Yang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录下--java返回jsonp案例梳理

*jsonp 主要是利用<script src=“http://IP:端口号/”></script> 来进行跨域;可以解决兼容性的问题利用<script>标签的跨域功能，同时要求后台返回的数据应该是以方法调用形式进行返回<script src=“http://localhost:端口/jquery.js”> 回调函数(dat...
复制链接

扫一扫