JSP + Ajax無法正常工作

Question

目標：如果我鍵入電子郵件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>

Answer 1

我建議您注意以下幾點：

使用庫JQuery ;

使用Servlet代替JSP；

在會話中保留一個列表；

不要使用表格布局 。 相反，請使用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); 
   } 
   ...

JSP + Ajax無法正常工作

問題描述

1 個解決方案

解決方案1
2 已采納 2013-08-03 18:51:35

JSP + Ajax無法正常工作

問題描述

1 個解決方案

解決方案1 2 已采納 2013-08-03 18:51:35

解決方案1
2 已采納 2013-08-03 18:51:35