需求如下:
使用Ajax检验注册信息中的中文昵称是否存在.
前端页面textregist.html:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>textregist.html</title>
<script src="js/jQuery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#bt").click(function() {
//1.创建Ajax对象
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.创建请求数据,通过open()方法
//获得用户名username的值
var username = $("#username").val();
xhr.open('get', encodeURI('textregist?username='+username), true);//encodeURI,设置客户端编码为utf-8
//3.设置回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//获得服务器响应的文本内容
var txt = xhr.responseText;
$("#sp").text(txt);
}
}
//4.调用send()方法
xhr.send(null);
})
})
</script>
</head>
<body>
<form>
<fieldset>
<legend>用户登录</legend>
昵称:
<input type="text" id="username" value="my">
<input type="button" id="bt" value="检查一下吧" > <font color='red'><span id="sp" > </span> <font>
<br /><br />
<input type="button" value="注册">
</fieldset>
</form>
</body>
</html>
配置Servlet:
package demo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TextRegistServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//服务器端设置为utf-8格式
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//接收请求参数
String username = request.getParameter("username");
//获得响应流
PrintWriter out = response.getWriter();
if("张三".equals(username)){
//做出响应
out.println("该昵称不可用!");
}else{
out.println("注册成功");
}
out.close();
}
}
