AJAX使用Jquery不能跨JSP頁面工作

我正在Eclipse Luna上使用以下技術開發動態Web應用程序：服務器端腳本JSP，Apache Tomcat v7.0，Oracle 11g作爲我的數據庫和JQuery。AJAX使用Jquery不能跨JSP頁面工作

下面是我的第一頁名.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進行調試，但不能破譯太多。任何幫助將不勝感激，因爲我找不到任何類似的問題以前被問到。

來源

2014-07-08 Ankur Roy Chowdhury

您似乎對$.ajax調用實際上在做什麼感到困惑。 AJAX是一種允許瀏覽器對資源進行異步HTTP調用而不需要加載整個瀏覽器頁面的技術。您在撥打$.ajax時所做的是要求瀏覽器將表單中的數據提交到網址RegisterProcess.jsp，然後以某種方式處理結果。

通過在您$.ajax調用指定的json的數據類型，你問jQuery來處理來自服務器的JSON對象的反應，但RegisterProcess.jsp頁面呈現爲HTML。因此，$.ajax調用將該響應解釋爲錯誤並相應地顯示消息。

您隨後在瀏覽器中重定向到RegisterProcess.jsp的原因是您不會阻止默認提交註冊表單。一種方法是在傳入事件上發出preventDefault()，或從事件處理程序返回false。

重構您的代碼，以便您將$.ajax請求提交給返回JSON的資源，或從$.ajax調用中刪除json數據類型說明符。

來源

2014-07-08 14:50:09 Palpatim

+1非常感謝！隨後我遵循你的解決方案並做了一些改變。我刪除了'dataType：「json」'這一行，並返回false爲我的提交方法。 –

看看你的表單是如何設置的。一旦提交，您的形式使一個POST到RegisterProcess.jsp這裏：

<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()回報。

來源

2014-07-08 14:49:26 hotforfeature

+1感謝您寶貴的見解！我通過進行兩項更改修正了錯誤： - 1）將onsubmit更改爲始終返回false，2）從$ .ajax（）方法中刪除dataType。 –

AJAX使用Jquery不能跨JSP頁面工作

回答

相關問題