Ajax使用jQuery操作（检查用户名是否可用）

最新推荐文章于 2021-08-06 11:54:16 发布

翱翔的鱼

最新推荐文章于 2021-08-06 11:54:16 发布

阅读量1.4k

点赞数

分类专栏： Ajax技术使用文章标签： Ajax

本文链接：https://blog.csdn.net/qq_39924152/article/details/80650412

版权

Ajax技术使用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.导入jQuery包

2.编写servlet

public class checkServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
if("scott".equals(name)){
out.println("用户名已被占用");
}else{
out.println("用户名可用");
}
out.flush();
out.close();
}

}

3.在web.xml中配置servlet

<servlet>
<servlet-name>checkServlet</servlet-name>
<servlet-class>checkServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkServlet</servlet-name>
<url-pattern>/check.do</url-pattern>

</servlet-mapping>

4.编写index.jsp界面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#username").blur(function(){
var name = $("#username").val();
$("#username_msg").html("正在检测...");
$.ajax({
url:"check.do",
type:"post",
data:{"name":name},
success:function(result){
$("#username_msg").html(result);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="username">
<span id="username_msg"></span>
</body>