2021-6-29(学习笔记) Ajax的简单使用案例

最新推荐文章于 2024-08-22 19:04:28 发布

明好

最新推荐文章于 2024-08-22 19:04:28 发布

阅读量82

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_46633796/article/details/118346533

版权

本文展示了如何在SpringMVC框架下编写Ajax控制器，进行简单的用户名和密码验证。通过Ajax发送请求，根据后端返回的响应，动态更新页面元素提示用户输入是否正确。示例包括了两个测试：Test1检查用户名是否为'admin'，Test2验证用户名和密码是否匹配'admin'和'123'。

摘要由CSDN通过智能技术生成

1.写好SpringMVC框架的代码和web.xml的代码

Test1----简单判断页面参数是否与后端的一致，一致则ok，不一致则no
1.在AjaxController类中，在类上面添加@Controller和@ResponseBody

@Controller
@ResponseBody   //此类将不经过视图解析器，直接输出Json字符串。
public class AjaxController(){
	
	@RequestMapping("/Ajaxtest1")
	public String test1(String name){
		if("admin".equals(name){
			return 'ok';
		}else{
			return 'no';
		}
	}
}

2.jsp页面中要导入js,后写Ajax

/*导入js*/
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	function T1(){
		$.ajax({
			url:"${pageContext.request.contextPath}/Ajaxtest1",
			data:{'name':$("#uname").val()},
			success:function(data){
				alert(data);
			}

		});
	}
</script>

..
..
</body>
						                /*焦点失去事件 */
用户名:<input type="text" id="uname" onblur="T1()"/>

Test2----检查用户名与密码是否输入正确
1.还是在AjaxController类的基础上写。

	public String test2(String name,String password){
	String msg="";
	if(name!==null){
		if("admin".equals(name)){
			msg="ok"；
		}else{
			msg="用户名输入错误，必须为admin"；
		}
	}
	if(password!==null){
		if("123".equals(password)){
				msg="ok"；
		}else{
			msg="密码输入错误，必须为123"；
		}
	}
	return msg;
}

2.jsp页面

<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/*用户名的Ajax*/
function N1(){
	$.ajax({
		url:"${pageContext.request.contextPath}/Ajaxtest2",
		data:{'name':$("#name").val()},
		success:function(data){
		if(data.toString()=='ok'){
			$("#userInfo").css("color","green");//如果后端传来的数据是ok，就改变css样式为绿色字体
		}else{
			$("#userInfo").css("color","red");
			}
			$("#userInfo").html(data);//将结果添加到id为userInfo的标签中并输入结果
		}
	});
}
/*密码的Ajax*/
 function P1(){
		$.ajax({
			url:"${pageContext.request.contextPath}/Ajaxtest3",
			data:{'password':$("#pwd").val()},
			success:function(data){
				if(data.toString()=='ok'){
					$("#pwdInfo").css("color","green");
				}else{
					$("#pwdInfo").css("color","red");
				}
				$("#pwdInfo").html(data);
			}
		});
	} 
</script>

...
...
</body>
<p>
  用户名:<input type="text" id="name" onblur="N1()"/>
   <span id="userInfo"></span>
</p>
<p>
  密码:<input type="text" id="pwd" onblur="P1()"/>
   <span id="pwdInfo"></span>
</p>