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 }