Question

我是ajax的新手，我编写了以下Ajax代码来验证表单字段，但它不起作用。我无法弄清楚如何调试它。任何人都可以解释如何使用ajax将数据从服务器发送回页面。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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>
<form name="validationForm" action="ValidateForm" method="get">
<table>
<tr><td>Catalog Id:</td><td><input type="text"
            size="20"  
            id="catalogId"
            name="catalogId"
            autocomplete="off"
           onkeyup="validateCatalogId();"></td>
         <td><div id="validationMessage"></div></td>
</tr>
</table>
</form>
</body>

<script type="text/javascript">
function validateCatalogId(){

    var xmlHttpRequest=init();

  function init(){
    if (window.XMLHttpRequest) {
           return new XMLHttpRequest();
       } else if (window.ActiveXObject) {

           return new ActiveXObject("Microsoft.XMLHTTP");
       }

    function processRequest(){
        if(xmlHttpRequest.readyState==4){
           if(xmlHttpRequest.status==200){

              processResponse();

            }
          }
        }

    var catalogId=document.getElementById("catalogId");
    xmlHttpRequest.open("GET", "validateForm?catalogId="+ 
    encodeURIComponent(catalogId.value), true);

    xmlHttpRequest.onreadystatechange=processRequest;

    xmlHttpRequest.send(null);

    function processResponse(){
      var xmlMessage=xmlHttpRequest.responseText;

      if(xmlMessage=="valid"){
          var validationMessage=document.getElementById("validationMessage");
          validationMessage.innerHTML = "Catalog Id is Valid";
          document.getElementById("submitForm").disabled = false;
          }

      if(xmlMessage=="invalid"){
          var validationMessage=document.getElementById("validationMessage");
          validationMessage.innerHTML = "Catalog Id is not Valid";
          document.getElementById("submitForm").disabled = true;
          }

         }


}
}


</script>

</html>

这是servlet代码：

package com.ajax.request;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/ValidateForm")
public class ValidateForm extends HttpServlet {
    private static final long serialVersionUID = 1L;


    public ValidateForm() {
        super();
        // TODO Auto-generated constructor stub
    }


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String catalogId = request.getParameter("catalogId");

        String uname="root";
        String pass="server";
        String driver="com.ibm.db2.jcc.DB2Driver";
        String url="jdbc:db2://localhost:50000/TEST:retrieveMessagesFromServerOnGetMessage=true;";
        Statement stmt=null;
        Connection conn=null;

        PrintWriter pw = response.getWriter();
        response.setContentType("text/plain");

        try{
            Class.forName(driver);
            System.out.print("driver loaded successfully");

        }catch(Exception e){
            e.printStackTrace();
        }
        try {
             conn = (Connection)DriverManager.getConnection(url,uname,pass);
             if(conn!=null){
                 System.out.println("we have a connection");
             }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        try {
             stmt = (Statement)conn.createStatement();
        } catch (SQLException e) {

            pw.print(e.getMessage());
        }

        String query = "SELECT * from DRUNKENDEATH.CATALOG WHERE EMAIL=" + "'" +
                catalogId + "'";
        try {
            ResultSet rs = stmt.executeQuery(query);

                if (rs.next()) {
                     pw.println("invalid");
                } else {
                     pw.println("valid");
                }

        } catch (SQLException e) {

            e.printStackTrace();
        }
    }// end of do get

}

Ajax表单字段验证

0 个答案: