AJAX在MVC中的应用

本文介绍了在MVC架构中如何使用Ajax进行交互。通过文本框失去焦点触发Ajax请求,以及利用Ajax进行用户名验证。在示例中提到了SpringBoot+Thymeleaf的环境,并建议使用Axios代替jQuery进行更高效的通信,因为jQuery对DOM操作较多。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用Ajax

当文本框失去焦点触发Ajax请求

1.onblur:失去焦点触发事件

  • 1.导入jquery , 可以使用在线的CDN , 也可以下载导入
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 // 去官网下载放在resource文件夹下/statics/js/jquery-3.1.1.min.js
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
  • 2.测试Jsp 当文本框失去焦点触发ajax请求
2.编写a1()事件  $=jquery ajax==post/get success:回调函数 url:后端post/get请求地址 name:后端接口的入参
<script>
 function a1(){$.ajax({
 url:"${pageContext.request.contextPath}/a1",
 data:{'name':$("#userName").val()},
 success:function (data){
 	alert(data);
 	}
 })
}
   </script>
  </head>
<body>
1.编写div id是在js中获取属性 a1是事件
 用户名:<input type="text" id="userName" onblur="a1()"/>
  </body>
</html>

Ajax验证用户名

SpringBoot+thymeleaf

#RestController
@RequestMapping("/a3")
public String ajax3(String name,String pwd){
    String msg = "";
    //模拟数据库中存在数据
    if (name!=null){
        if ("admin".equals(name)){
            msg = "OK";
        }else {
            msg = "用户名输入错误";
        }
    }
    if (pwd!=null){
        if ("123456".equals(pwd)){
            msg = "OK";
        }else {
            msg = "密码输入有误";
        }
    }
    return msg; //由于@RestController注解,将msg转成json格式返回
}

HTML

#2.绑定a1事件:ajax的三个参数 url:${pageContext.request.contextPath}/a1
 function a1(){
	$.ajax({
	 url:"a1",
	 data:{'name':$("#name").val()},
 	success:function (data){
 	  $("#msg").html(data);
 		}
	});
}

#1.用户名,密码 输入框 
<body>
<p>
    ajax用户名:<input type="text" id="name" onblur="a1()"/>
    <span id="msg"></span> //这里显示后端返回的信息 需要ajax赋值给id="msg"
</p>
</body>
</html>

在这里插入图片描述

推荐Axios框架进行通信。少用jQuery,因为它操作Dom太频繁!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值