Ajax与SpringMVC交互

Ajax异步请求发送，可以不使用<form>提交表单信息，不用刷新浏览器，后端也可以收到前端传递的参数
在开发过程中，使用Ajax可以大大提生用户的体验感

User实体类

public class User {
    String mail;

    public String getMail() {
        return mail;
    }

    public void setMail(String mail) {
        this.mail = mail;
    }
}

Controller层

@RequestMapping("verify_code_register")
public String verify_code(@RequestBody User user){
    System.out.println("邮箱是否获取：" + user.getMail());
}

JSP

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(function (){
            $("#send").click(function () {
                var mail = document.getElementById("mail").value;//字段名和值
                if (mail == null || mail === ""){
                    alert("邮箱忘了填!!");
                }else {
                    $.ajax({
                        url:"${pageContext.request.contextPath}/verify_code_register", //请求的url地址
                        contentType:"application/json;charset=UTF-8", //给服务器端传递的数据类型

                        data:'{"code":"Register",' +
                            '"mail":'+ '"' +mail + '"' +'}', //请求传递的数据(这里是json格式)

                        //data:{code:"Register",mail: mail},//请求传递的数据(这里是json格式)，不知道怎么回事，这种写法服务器端会报错

                        dataType:"json", //预期从服务器端接收到的数据类型
                        type:"POST", //请求方式
                        success:function (data) { //请求成功后回调的函数
//data:从服务器端返回的数据
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>

<div>
    <label>邮　箱</label>
    <div>
        <input id="mail" type="text" placeholder="仅支持主流邮箱" title="邮箱">
    </div>
</div>

<button id="send">获取</button>

</body>
</html>
posted @ 2022-09-23 03:17  MiYol  阅读(28)  评论(0)    收藏  举报