<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
<script src="/ajax/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form action="http://www.ubfgho.com/" method="post">
姓名：<input type="text" name="name"><span></span><br>
密码：<input type="password" name="psw"><br>
<input type="submit" value="提交"><br>
</form>
</body>
<script>
/*前端form表单提交的是整个页面，进入servlet，利用Jquery实现前台验证，做非空验证
利用Ajax实现异步请求，不需要跳转页面，判断姓名是否重名：
1、创建发送异步请求的对象req
2、准备发送：请求方式get、post 路径url 是否为异步true
3、执行发送
*/
//js实现get方式的异步请求:
//发送
$(':text').blur(function () {
var name1=$(this).val().trim()//获取参数与name1
var req=new XMLHttpRequest();//创建发送异步请求的req
req.open("GET","/ajax/login?name="+name1,true)//准备发送
req.send()
//接收：发送不可能马上接受，这里需要设置状态时机成熟才去接收服务器的响应文本
/*
readyState:
* 0表示请求未初始化
* 1服务器已建立连接
* 2请求已接收
* 3请求处理中
* 4请求已完成，且响应就绪
* status：200表示OK 404表示未找到页面
* */
req.onreadystatechange=function () {
if (req.readyState==4&&req.status==200){
//req.responseText;//response接收后台响应的text
$('span').html(req.responseText)//赋值给span标签
}
}
})
//1、失去焦点事件--判断姓名是否为空
$(':text').blur(function () {
var v=$(this).val()
if (v.trim()==""){
$("span").html("姓名为空").css("color","red")
}else{
$("span").html("")//清空span
}
})
//2、提交事件---点击提交按钮触发submit
$("form").submit(function () {
//选中text文本
var v=$(':text').val().trim();
if (v==""){
//如果姓名为空。就返回false，阻止提交，
return false
}
})
</script>
</html>