该用户名被使用_Ajax简单运用

功能需求: 检验用户名是否存在

　　1. 使用Ajax

　　2. 如果用户名存在, 则用红色字体提示"该用户名已经被使用", 否则"该用户名可用"

　　　　<font color="red">该用户名已经被使用</font>

　　　　<font color="red">该用户名可用</font>

　　3. 根据返回的数据结果, 考虑使用HTML格式的数据

　　4. 用户名输入框触发change事件

-----------------------------------------------------

实现:

工程结构:

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>CheckUserName_Ajax</title>
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">

   <script type="text/javascript"
           src="<%=basePath%>scripts/jquery-1.7.2.min.js"></script>
   <script type="text/javascript">
       $(function() {
           $(":input[name='username']").change(function() {
               var username = $(this).val().trim();
               if (username != "") {
                   var url = "validateUsername";
                   var args = {"username": username, "time": new Date()};　　// 发送的数据

                   $.post(url, args, function(data) {
                       $("#message").html(data);
                   });
               }
           });
       });
   </script>
</head>

<body>
   <form action="" method="post">
       UserName: <input type="text" name="username"/>
       <div id="message">
           
       </div><br>
       <input type="submit" value="Submit"/>
   </form>
</body>
</html>
web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<servlet>
    <servlet-name>ValidateUsernameServlet</servlet-name>
    <display-name>CheckUserName_Ajax</display-name>
    <description>CheckUsername_Ajax</description>
    <servlet-class>com.atguigu.app.ajax.servlet.ValidateUsernameServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>ValidateUsernameServlet</servlet-name>
    <url-pattern>/validateUsername</url-pattern>
</servlet-mapping>
</web-app>

ValidateUsernameServlet.java: (Servlet)

package com.atguigu.app.ajax.servlet;

import java.io.IOException;
import java.util.Arrays;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class ValidateUsernameServlet extends HttpServlet {

   public void doPost(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {

       // 创建几个校验数据
       List<String> usernames = Arrays.asList("AAA", "BBB", "CCC");

       // 获取JSP传递过来的username
       String username = (String) request.getParameter("username");

       // 进行数据校验
       String result = null;
       if (usernames.contains(username)) {
           result = "<font color='red'>该用户名已经被使用</font>";
       } else {
           result = "<font color='green'>该用户名可以使用</font>";
       }

       // 返回校验结果
       response.setContentType("text/html;charset=UTF-8");   // 指定返回数据格式及编码
       response.setCharacterEncoding("UTF-8");   // 解决乱码
       response.getWriter().print(result);
   }
}

测试:

posted @ 2017-03-11 00:37 半生戎马，共话桑麻、阅读(159) 评论(0) 收藏举报

刷新页面返回顶部

Hello_Joseph

该用户名被使用_Ajax简单运用

公告