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>

上一篇爬取BiliBili视频

下一篇微信发送新闻每日汇报

本文作者：MiYol

本文链接：https://www.cnblogs.com/miyol/p/16721414.html

posted @ 2022-09-23 03:17 MiYol 阅读(13) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

miyol

MiYol

Ajax与SpringMVC交互

User实体类

Controller层

JSP

公告

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

	public class User {
	String mail;

	public String getMail() {
	return mail;
	}

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

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

	<%@ 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>