爲什麼我無法處理$ .ajax返回的HTTP狀態碼？

我有未來JSP頁面上的谷歌應用程序引擎的工作原理：

<%@ page contentType="text/html; charset=windows-1251" language="java" %> 
<%@ page import="com.wedding.Register" %> 

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 

     <script src="js/jquery.min.js" type="text/javascript"></script> 
     <script src="js/bootstrap.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     function submitMyForm(button) { 
      var myForm = $(button).closest('form'); 
      $.ajax({ 
       url: $(myForm).attr('action'), 
       type: "post", 
       contentType:attr("enctype", "multipart/form-data"), 
       data: $(myForm).serialize(), 
       statusCode: { 
        400: function() { 
         $('.form-inline').after("<h1>400!</h1>"); 
        }, 
        200: function() { 
         $('.form-inline').after("<h1>200!</h1>"); 
        } 
       } 
      }); 
     } 
    </script> 
</head> 
<body> 
    <div class="container"> 

    <% 
     String companyName = Register.getLoggedInCompanyName(request); 
     if (companyName == null) { 
    %> 

     <div class="navbar"> 
      <div class="navbar-inner"> 
      <a class="brand" href="#">Menu</a> 
      <ul class="nav"> 
       <li><a href="/">Home</a></li> 
       <li class="active"><a href="/reg.jsp">Register</a></li> 
      </ul> 
      </div> 
     </div> 

     <div class="hero-unit"> 
      <h1>Login</h1> 
      <p>Enter login credentials</p> 
      <p> 
        <form action="/reg?action=login" class="form-inline" method="post" enctype="multipart/form-data"> 
         <input type="text" name="email" class="input-xlarge" placeholder=""> 
         <input type="password" name="password" class="input-xlarge" placeholder=""> 
         <button type="submit" class="btn" onClick="submitMyForm(this)">Login</button> 
        </form> 
      </p> 
     </div> 

    <% 
     } else { 
    %> 

     <div class="navbar"> 
      <div class="navbar-inner"> 
      <a class="brand" href="#">Menu</a> 
      <ul class="nav"> 
       <li><a href="/">Home</a></li> 
       <li class="active"><a href="/reg?action=logout">Logout</a></li> 
      </ul> 
      </div> 
     </div> 

     <div class="hero-unit"> 
      <h1>Error</h1> 
      <p>Error.</p> 
     </div> 

    <% 
     } 
    %> 

    </div> 

    <div id="footer"> 
     <div class="container"> 
      <p class="muted credit"></p> 
     </div> 
    </div> 
</body>

的問題是，當一個點擊按鈕的形式發送到服務器，但如果服務器返回400 HTTP狀態代碼

$('.form-inline').after("<h1>400!</h1>");

未被調用。

我也試過成功/錯誤功能和其他HTTP代碼，但沒有成功。有趣的是，它曾經工作過，然後總是失敗。瀏覽器不是向HTML添加新元素，而是重定向到生成的錯誤頁面。

HttpServletResponse.sendError(400);

我已經簽了正確的請求和響應發送的狀態代碼使用返回。我也檢查過最新的jquery是鏈接的。

來源

2012-11-22 Vsevolod

我看不到你如何停止表單提交。或者，你是否在你的片段中錯過了那部分？ – Alexander

「停止表單提交」是什麼意思？對不起，我是JS新手。我嘗試了很多樣品，但沒有一個適合我。 – Vsevolod

我在回答中接過了這個 – Alexander

甲<button/>封閉在<form/>，默認情況下，提交它。所以，你需要停止表單提交。

在下面的示例中，我將堅持使用jQuery而不是JavaScript和jQuery的組合。

/* Bind the submit event */ 
$("form").submit(function() { 
    /* Request an HTTP 400 */ 
    $.ajax({ 
    url: "http://httpstat.us/400", 
    statusCode: { 
     400: function() { 
     console.log("HTTP 400 received"); 
     } 
    } 
    }); 
    /* stop the form submission */ 
    return false; 
});

<form action="/reg?action=login" class="form-inline" method="post" enctype="multipart/form-data"> 
    ... 
    <button type="submit" class="btn">Login</button> 
    ... 
</form>

由於$.ajax是異步執行的，如果你不停止表單提交的瀏覽器仍然會提交因此重定向的頁面。

Feel free to test it out。

來源

2012-11-23 18:30:00 Alexander

謝謝。問題出在contentType：attr（「enctype」，「multipart/form-data」）行，因爲某些原因沒有工作。你的解決方案很好，沒有它:) – Vsevolod

你有沒有嘗試圍繞jQuery文檔準備好的函數submitMyForm（button）？

$(document).ready(function(){ 

function submitMyForm(button) { 
      var myForm = $(button).closest('form'); 
      $.ajax({ 
       url: $(myForm).attr('action'), 
       type: "post", 
       contentType:attr("enctype", "multipart/form-data"), 
       data: $(myForm).serialize(), 
       statusCode: { 
        400: function() { 
         $('.form-inline').after("<h1>400!</h1>"); 
        }, 
        200: function() { 
         $('.form-inline').after("<h1>200!</h1>"); 
        } 
       } 
      }); 
     } 


});

來源

2012-11-22 23:26:36 user1832281

剛試過。它不會改變任何東西。 – Vsevolod

這將使它超出事件處理函數的作用域並阻止它被調用。 – Quentin

爲什麼我無法處理$ .ajax返回的HTTP狀態碼？

回答

相關問題