ajax无法与jsp页面一起使用,并且无法从servlet打印响应

时间:2018-08-16 16:20:36

标签: java ajax jsp servlets

我有一个JSP页面,其中编写了用于注册页面和ajax调用的设计代码,以验证来自servlet的电子邮件地址。当我从servlet提取查询时,它表明该记录存在于db中,但是我无法在RegiserUSer.jsp页面上打印它,而是在servlet页面(Registration.java)上打印记录,但是我希望此消息应该可以在“提交”按钮下方的jsp页面上打印。

这是我的页面

RegisterUser.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Registration Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script    src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</head>

<body class="mt-10">    
<div  class="m-auto text-center mt-5" style="margin: 10px 0 0 10px; width: 400px">
<form action="Registration" method="post" class="mt-5 border px-4 py-5" style="padding: 10px;"  onsubmit="return validateForm()">
        <h3>Member Signup</h3>
        <table class="w-100">
            <tbody>
                <tr>
                    <td><input type="text" placeholder="create username"
                        name="username" class="form-control mt-2" /> <span
                        id="usernameErrorMsg" class="text-danger"></span></td>
                </tr>
                <tr></tr>
                <tr>
                    <td><input type="text" placeholder="name" name="name"
                        class="form-control mt-2" /> <span id="nameErrorMsg"
                        class="text-danger"></span></td>
                </tr>
                <tr></tr>
                <tr>
                    <td><input type="email" placeholder="email" name="email" id="email"
                        class="form-control mt-2"/> <span id="msg" class="text-danger"></span></td>
                    <!-- <span id="msg"></span> -->
                </tr>
                <tr></tr>
                <tr>
                    <td><input type="tel" placeholder="mobile number"
                        name="mobile" class="form-control mt-2" /> <span
                        id="mobileErrorMsg" class="text-danger"></span></td>
                </tr>
                <tr></tr>
                <tr>
                    <td><input type="password" placeholder="password" name="pwd"
                        class="form-control mt-2" /> <span id="pwdErrorMsg"
                        class="text-danger"></span></td>
                </tr>
                <tr></tr>
                <tr>
                    <td><input type="password" placeholder="confirm password"
                        name="cpwd" class="form-control mb-2" /> <span id="cpwdErrorMsg"
                        class="text-danger"></span></td>
                </tr>
                <tr></tr>
            </tbody>
            <tr></tr>

        </table>
        <button type="submit" name="submit" class="btn btn-primary" id="formSubmit" >Register</button>
        <button type="reset" name="cancel" class="btn btn-primary">Cancel</button>
        <br /> Already Registered? <a href="Login.jsp" class="mb-2">Signin</a><br>
        <div id="messageDiv" style="display:none;"></div>
    </form>
</div>

 <script>
$("#formSubmit").on('click', function(){
     alert('test1');
     debugger;
     var xmlhttp = new XMLHttpRequest();
    var email = $("#email").val();
    alert(email);
    var email1="?email=" + email
    var url = "http://localhost:8080/MyWebProject/UserDetails/Registration"; 
    alert(url);
    debugger;

     $.ajax({
        type: "POST",
        url : url,           
        data: "email="+ email,         

        success : function(results){
            if(results != null && results != ""){
                 debugger;
                showMessage(results);
                $('#messageDiv').css("display","block");
            }else{
                 debugger;
                $('#messageDiv').css("display","none");
                $('#messageDiv').html("");
                alert("Some exception occurred! Please try again.");
            }
        },
        error: function(jqxhr){
            alert("error alert called");
             debugger;
            return false;
        }
    }); 
});

//function to display message to the user
function showMessage(results){
    if(results == 'SUCCESS'){
        $('#messageDiv').html("<font color='green'>Email Not Registered </font>")
    }else if(results == 'FAILURE'){
        $('#messageDiv').html("<font color='red'>Email Registered </font>")
    }
}

</script> 
</body>
</html>

RegistrationService.java

 public class RegistrationService {
 public String  doLogin(String email) {
    Connection con = null;
    String message = null;
    String query;
    try {
        con = DBConnection.connectDB();
        query ="SELECT TOP 1 * FROM UserDetails WHERE email="+"'"+email+"'";
        ResultSet rs =DBConnection.getDBResultSet(con, query);
        if(rs.next()){
            message = "SUCCESS";
        }else{
            message = "FAILURE";
        }
    }catch(Exception e) {
        message = "FAILURE";
        e.printStackTrace();
    }
    return message;
}

Registration.java

public class Registration extends HttpServlet {
boolean status;
String emailValue,resultData,success,fail;
PreparedStatement ps = null;
PrintWriter out ;
RegistrationService service = null;
public void init(ServletConfig config)throws ServletException{
    service = new RegistrationService();
}
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    }
protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    PrintWriter out = response.getWriter();
    HttpSession session = request.getSession();
    response.setContentType("text/html");
    String userName = request.getParameter("username");
    String name = request.getParameter("name");
    String email = request.getParameter("email");
    String phone = request.getParameter("mobile");
    String password = request.getParameter("pwd");
    String confirmPassword = request.getParameter("cpwd");

    String message = service.doLogin(email);
    response.getWriter().write(message);

}
}

现在,请提出如何打印成功和失败消息的信息,即分别在RegisterUser.jsp页面本身上打印“已注册电子邮件”和“未注册电子邮件”。

Here is my UI design for registration page

But currently success/failure message are printing on servlet page not the real msg i.e Email Registered and Email Not Registered respectively on servlet page

0 个答案:

没有答案