1 Jsp部分： 2
3 <!-- 导入jquery的js外部文件 -->
4 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
5 <script>
6 $(function() { 7 //定义全局变量，这里只有一个label，所有用标签选择器
8 var lab = $("label"); 9 lab.css("color", "red"); 10 lab.css("font-size", "12px"); 11
12 //点击任何一个input标签的button都将执行，本测试只有一个
13 $(":button").click(function() { 14 //获取指定id的第一个元素内容
15 var name = $("#userName").val(); 16 //执行ajax
17 $.ajax({ 18 //传输类型，这里使用Post
19 type: "Post", 20 //传输地址，这里是间接路径，测试路径在同目录下
21 url: "search", 22 //传输数据,也可以通过问号传值, 比如 url："search?name="+name
23 data: {name: name}, 24 //成功执行时
25 success:function(mess) { 26 //消息反馈为 "yes"
27 if(mess=="yes") { 28 //label标签赋值
29 lab.text("该用户名已存在！"); 30 }else { 31 lab.text("用户名可以使用！"); 32 } 33 } 34 }) 35 }) 36
37 }) 38 </script>
39
40 </head>
41 <body>
42
43 <input type="text" id="userName" /><label></label><br/><br/>
44 <input type="button" id="accept" value="验证用户名"/>
45
46 </body>
1 Servlet部分： 2
3 @WebServlet("/search") 4 public class searchServlet extends HttpServlet { 5 private static final long serialVersionUID = 1L; 6
7 //get请求方式也传递给post处理
8 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 9 doPost(request, response); 10 } 11
12 protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { 13 //避免出现编码紊乱，统一使用utf-8
14 request.setCharacterEncoding("utf-8"); 15 response.setContentType("text/html; charset=utf-8"); 16 //获取从跳转页面得到的内容
17 String name = request.getParameter("name"); 18 PrintWriter out = response.getWriter(); 19
20 //这里假设验证 silly 为已存在, 若需要测试实际数据，则可通过jdbc操作从数据库中查找
21 if(name.equals("silly")) { 22 //给Ajax反馈信息
23 out.print("yes"); 24 }else { 25 out.print("no"); 26 } 27 } 28 }
