SpringBoot框架 -- AJAX跨域实现

最新推荐文章于 2022-02-24 22:31:18 发布

徐寿春

最新推荐文章于 2022-02-24 22:31:18 发布

阅读量129

点赞数

分类专栏：待整理文档文章标签： springBoot

本文链接：https://blog.csdn.net/weixin_44550490/article/details/102605645

版权

待整理文档专栏收录该内容

78 篇文章 0 订阅

订阅专栏

SpringBoot框架 – AJAX跨域实现

本章基于：异常封装

前文已经对于SpringBoot简单交互实现了异常封装，那么在此基础上面，如果做前后端交互，该如何处理，做一个简单的前后端分离。也是现在企业级常用的处理方式

新建空项目

第一步，新建项目架构

在这里插入图片描述
创建user包引入jsquery，创建html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
</head>
<body>

<div>
    <h3>获取top信息</h3>
    <div>
        <label>手机号码</label>
        <div>
            <input type="text" placeholder="手机号" name="telphone" id="telphone">
        </div>
    </div>
    <div>
        <button id="gitotp" type="submit">
            获取短信
        </button>
    </div>
</div>

<script language="JavaScript">
    $(document).ready(function () {

        $("#gitotp").bind("click", function () {
            var telphone = $("#telphone").val()
            if (telphone==null||telphone==""){
                alert("请输入手机号码")

            }
            $.ajax({
                type: "post",
                url: "http://localhost:80/user/getotp",

                data: {
                    "telphone": $("#telphone").val()

                },
                success: function (data) {
                    if (data.status == "success") {
                        alert("otp已经发到手机上，请注意查收")
                    } else {
                        alert("otp发送失败，原因为" + data.data.errMsg)
                    }


                },
                error: function (data) {
                    alert("otp发送失败，因为" + data.responseText)

                }

            });


        })


    })


</script>

</body>
</html>

在这里插入图片描述

回调如果成功由于后台设置的返回相应为ok所以取返回数据的json状态success
如果回调失败返回响应文档

第二步：后台添加crossorgin，并指定响应请求post与ajax请求type类型相同

在这里插入图片描述

  @RequestMapping(value = "/getotp",method = {RequestMethod.POST})
    @ResponseBody

    public CommonReturnType getOtp(@RequestParam(name = "telphone") String telphone) {
        //需要一定规则生成Otp验证码 创建随机验证码
        Random random = new Random();
        int randomInt = random.nextInt(99999);
        randomInt += 10000;
        String otpCode = String.valueOf(randomInt);

        // 将otp验证码同时应用户的手机号码关联，使用httpsession方式绑定
        //键值对管理啊
        httpServletRequest.getSession().setAttribute(telphone, otpCode);
        System.out.println(otpCode);

        return CommonReturnType.create(null);
    }