JSP + Ajax не работает

Цель: Если я набираю идентификатор электронной почты, в форме 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. 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

Что подразумевается не работает? Pls делится любым исключением, это длинный код. – NINCOMPOOP

Не вызывает никаких исключений. Но он работает неправильно. – Arun

, если вам не нужен HTML в ответе, вы не должны использовать JSP в первую очередь. Pls не пишет Java-код в JSP, используйте Servlet. – NINCOMPOOP

Я бы посоветовал вам следующее:

Использование библиотека JQuery;

Использование сервлета вместо JSP;

Сохраните список в сеансе;

Не используйте табличный макет. Вместо этого используйте разделители и каскадные таблицы стилей.

Вот простой пример, фронт- конец часть ..

<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 не работает

ответ

Смежные вопросы