<%@ 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" enctype="application/x-www-form-urlencoded">
姓名：<input type="text" name="name"><span></span><br>
密码：<input type="password" name="psw"><br>
<input type="submit" value="提交"><br>
</form>
</body>
<script>
//js实现post方式的异步请求
$(':text').blur(function () {
var name1=$(this).val().trim()
//1、创建发送异步请求的对象req
var req=XMLHttpRequest();
//2、准备发送
req.open("POST","ajax/login",true)
//3、设置请求头
req.setRequestHeader("Content-type","application/x-www-form-urlencoded")
//4、发送
req.send("name"+name1)
//回调参数
req.onreadystatechange=function () {
if (req.readyState==4&&req.status==200){
$("span").html(req.responseText).css("color","red")
}
}
})
//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>
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name=request.getParameter("name");
boolean b=dao.selectName(name);
String msg=b?"用户名已被占用":"用户名正常";
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(msg);
}