1

目标：如果我键入一个电子邮件 ID，它必须在 html 表单中将请求发送到执行逻辑的 jsp，并且必须打印（以 html 表单）电子邮件是否可用。我有以下代码。请帮助我做错了哪一部分。

CreateAccount.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="emailStore.js"></script>
</head>
<body onload="process()">
    <form name="login">
        <table align="center">
            <tr>
                <td>Email*</td>
                <td><input type="text" name="userinput" id="userinput"/></td>
                <td><div id = "underInput"></div></td>
            </tr>
            <tr>
                <td>Password*</td>
                <td><input type="password" name="pswrd" /></td>
            </tr>
            <tr>
                <td>Repeat Password*</td>
                <td><input type="password" name="pswrd1" /></td>
            </tr>
            <tr>
                <td>First Name*</td>
                <td><input type="text" name="userid" /></td>
            </tr>
            <tr>
                <td>Last Name*</td>
                <td><input type="text" name="userid" /></td>
            </tr>
            <tr>
                <td>Phone Number</td>
                <td><input type="text" name="userid" /></td>
            </tr>
        </table>
        <div style="text-align: center">
            <input type="submit" value="Create Account"/>
        </div>
    </form>

</body>
</html>

javascript 文件中的 ajax 部分。emailStore.js

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequest()
{
    var xmlHttp;

    if(window.ActiveXObject)
    {
        try
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e)
        {
            xmlHttp = false;
        }
    }
    else
    {
        try
        {
            xmlHttp = new ActiveXObject();
        }
        catch(e)
        {
            xmlHttp = false;
        }
    }
    if(!xmlHttp)
    {
        alert("can't create that object");
    }
    else
    {
        return xmlHttp;
    }
}

function process()
{
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4)
    {
        email = encodeURIComponent(document.getElementById("userinput").value);
        xmlHttp.open("GET", "emailStore.jsp?email=" + email, true);
        xml.onreadystatechange = handle.ServerResponse;
        xmlHttp.send(null);
    }
    else
    {
        setTimeout('process()', 1000);
    }
}

function handleServerResponse()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            xmlResponse = xmlHttp.responseXML;
            xmlDocumentElement = xmlResponse.documentElement;
            message = xmlDocumentElement.firstChild.data;
            document.getElementById("underInput").innerHTML = '<span style = "color:blue">' + message + '</span>';
            setTimeout('process()',1000);
        }
        else
        {
            alert('Something went Wrong');
        }
    }
}

以及 jsp 文件中的逻辑部分 - emailStore.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.ArrayList"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

    <%
        String email = request.getParameter("userinput");
        ArrayList<String> emails = new ArrayList<String>();
        emails.add("something@gmail.com");
        if (emails.contains(email)) {
            out.println("Email already taken!");
        } else {
            out.println("Email available");
        }
    %>

</body>
</html>
4

1 回答 1

2

我会建议你以下几点：

  1. 使用库JQuery；
  2. 使用 Servlet 代替 JSP；
  3. 在会话中保留一个列表；
  4. 不要使用表格布局。相反，使用 div 层和级联样式表。

这是一个简单的例子，前端部分是..

<head>
...
<script>
    $(document).ready(function() {                        
       $('#submit').click(function(event) {  
          var input=$('#userinput').val();
          $.get('ActionServlet',{userinput:input},function(responseText) { 
             $('#underInput').text(responseText);         
          });
        });
    });
</script>
...
</head>
<body>
...
<form id="form1">
...
Email
<input type="text" id="userinput"/>
<input type="button" id="submit" value="Submit"/>
<br/>
<div id="underInput">
</div>
...
</form>
...
</body>
</html>

..和服务器端 -

...
public class ActionServlet extends HttpServlet {
   private static final long serialVersionUID = 1L;

   public ActionServlet() {
      // TODO Auto-generated constructor stub
   }

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      String answer = "Something went Wrong";
      String userinput = request.getParameter("userinput").toString();

      HttpSession httpSession = request.getSession(true);
      if(httpSession.isNew()) {
         httpSession.setAttribute("sessionVar", new ArrayList<String>());
      }

      List<String> arrayList = (ArrayList<String>)httpSession.getAttribute("sessionVar");
      if(userinput != null && !userinput.equals("")) {
         if(arrayList.contains(userinput)) {
            answer = "Email already taken!";
         } else {
            arrayList.add(userinput);
            answer = "Email available";
         }
      }

     response.setContentType("text/plain");  
     response.setCharacterEncoding("UTF-8"); 
     response.getWriter().write(answer); 
   } 
   ...
于 2013-08-03T18:51:35.417 回答