效果图:
代码:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/day18/js/jquery/jquery.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<form action="" method="" enctype="application/x-www-form-urlencoded">
用户名:<input type="text" id="username" name="username"/>
<span id="msg"></span><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
CheckNameServlet.java:
package text.ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/checkName")
public class CheckNameServlet extends HttpServlet{
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
String msg="";
String username = req.getParameter("username");
// 判断用户是否存在
if("rose".equals(username)) {
msg="该用户名已经存在";
}else if("".equals(username)){
msg="请输入数据";
}else {
msg="恭喜你,可以使用";
}
writer.write(msg);
}
}
方法一:
index.js:
$(function(){
//给文本框绑定失去焦点的事件
$("#username").blur(function(){
$.ajax({
type:"get", //请求方式
url:"/day18/checkName",
data:"username="+this.value, //参数
dataType:"text", //预期返回的数据类型
success:function(res){ //请求成功时的回调函数
if(res=="恭喜你,可以使用"){
$("#msg").css("color","green").html(res);
}else{
$("#msg").css("color","red").html(res);
}
}
})
})
})
方法二:
index.js:
$(function(){
//给文本框绑定失去焦点的事件
$("#username").blur(function(){
//$.get发送请求
/*
* 1、url:请求的地址
* 2、请求的参数
* 3、成功时的回调函数,回调函数的参数就是响应的文本
* 4、预期的返回类型
* */
$.post("/day18/checkName", //get和post换一下,别的不需要改变就可以
{username:this.value},
function(res){
if(res=="恭喜你,可以使用"){
$("#msg").css("color","green").html(res);
}else{
$("#msg").css("color","red").html(res);
}
},"text")
})
})