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>