JSP + Ajax无法正常工作

目标：如果我输入一个电子邮件ID，在html表单中它必须发送请求到jsp，在那里它执行逻辑并且必须打印（在html表单中）电子邮件是否可用，或者不。我有以下代码。请帮助我，我做错了哪一部分。JSP + Ajax无法正常工作

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("[email protected]"); 
     if (emails.contains(email)) { 
      out.println("Email already taken!"); 
     } else { 
      out.println("Email available"); 
     } 
    %> 

</body> 
</html>

来源

2013-08-03 Arun

什么是不工作是什么意思？请分享任何异常，这是一个冗长的代码。 – NINCOMPOOP

不会抛出任何异常。但它不能正常工作。 – Arun

如果你在响应中不需要HTML，你不应该首先使用JSP。请不要在JSP中编写Java代码，请使用Servlet。 – NINCOMPOOP

我劝你如下：

使用图书馆JQuery;

使用Servlet代替JSP;

在会话中保留一个列表;

请勿使用表格布局。相反，使用div-layers和级联样式表。

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

<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-03 18:51:35

JSP + Ajax无法正常工作

回答

相关问题