Question

我正在使用Eclipse Luna上的以下技术开发动态Web应用程序：服务器端脚本的JSP，Apache Tomcat v7.0，Oracle 11g作为我的数据库和Jquery。

下面是我的第一个.jsp页面，它是一个基本的注册页面：

<%@ 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>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="ValidateRegister.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Welcome</title>
</head>

<body>

<%@include file="Home.jsp" %> <br/>

<div id="form">

<form id="login" action="RegisterProcess.jsp" method="post" name="login">  
    <table>
        <tr><td>User Name</td><td><input type="text" name="uname"/><br/></td><td><p id="unamecheck"></p></td></tr>  
        <tr><td>Email ID</td><td><input type="text" name="uemail"/><br/></td><td></td></tr>  
        <tr><td>Password</td><td><input type="password" name="upass" /><br/></td><td></td></tr>
        <tr><td></td><td><input type="submit" id="submit" value="Register"/></td><td></td></tr>
    </table>
</form>

</div>

</body>
</html>

此页面收集用户凭据，并在表单提交时触发以下JavaScript：

   $(document).ready(function() {  
                $('#submit').click(function() {
                    var result=validateForm();
                    if(result===false)
                        return result;
                    else
                         checkUsername();
                          });}
                        );

            function validateForm()
            {       
               //does usual validation like empty string etc..
            }

            function checkUsername()
            {
                $.ajax(
                {
                    url:"RegisterProcess.jsp",
                    data:$("#login").serialize(),
                    type:"post",
                    dataType:"json",
                    success:function(data)
                    {
                     $("#unamecheck").text(data);
                        },
                    error: function( xhr, status, errorThrown ) {
                        alert( "Sorry, there was a problem!" + status + errorThrown);
                        console.log( "Error: " + errorThrown );
                        console.log( "Status: " + status );
                        console.dir( xhr );
                    },
                    complete:function(xhr,status)
                    {
                        alert( "The request is complete!" );
                    }

                });
            }

被引用的jsp页面是：

 <%@ 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>Processing</title>
    </head>

    <body>
    <%@page import="bean.RegisterDao"%>  

    <jsp:useBean id="obj" class="bean.User"/>  

    <jsp:setProperty name="obj" property="*"/>  

    <%  
        final int status=RegisterDao.register(obj);  
        if(status>0)
            out.print("You are successfully registered");  
        else
            out.print("Username already exists!");
        %> 

    </body>
    </html>

当我按提交表单时，我收到提示消息：“抱歉，出现问题！错误”，然后是“请求已完成！”然后我被重定向到RegisterProcess.jsp页面，它输出正确的内容：“用户名已存在”或“注册成功”。

我使用Firebug进行调试，但无法破译。任何帮助都会非常感激，因为我以前找不到任何类似的问题。

Answer 1

您似乎对$.ajax电话的实际操作感到困惑。 AJAX是一种允许浏览器对资源进行异步HTTP调用而不需要加载整个浏览器页面的技术。您在$.ajax来电中所做的是要求浏览器将表单中的数据提交到网址RegisterProcess.jsp，然后以某种方式处理结果。

通过在json调用中指定$.ajax的数据类型，您要求jQuery将来自服务器的响应视为JSON对象，但是RegisterProcess.jsp页面呈现为HTML。因此，$.ajax调用将响应解释为错误并相应地显示消息。

您之后在浏览器中重定向到RegisterProcess.jsp的原因是您不能阻止默认提交注册表单。一种方法是在传入的事件上发出preventDefault()，或者从事件处理程序返回false。

重新构建代码，以便向返回JSON的资源提交$.ajax请求，或从json调用中删除$.ajax数据类型说明符。

Answer 2

看看您的表单是如何设置的。提交后，您的表单会在这里向RegisterProcess.jsp发布POST：

<form id="login" action="RegisterProcess.jsp" method="post" name="login">

此外，每当按下提交按钮时，您都会使用AJAX进行第二次POST。很可能，你有一个竞争条件。

表单的POST首先完成并发出重定向，这会在JavaScript中断你的AJAX POST。我敢打赌，如果你看看抛出的是什么错误，那将是某种形式的中断异常。

您想将您的用户重定向到RegisterProcess.jsp吗？如果没有，请从<form>中删除操作和方法，然后让您的AJAX调用进行验证。

是否应该将用户重定向到ReigsterProcess.jsp？如果是这样，请将表单更改为此并删除您的AJAX调用：

<form id="login" name="login" action="RegisterProcess.jsp" method="post" onsubmit="return validateForm();">

单击“提交”时，表单首先会在提交POST并重定向到RegisterProcess.jsp之前查找validateForm()的真/假返回。

使用Jquery的AJAX不能跨JSP页面工作

2 个答案: