2010-09-15 232 views
0

我做使用jQuery,並從服務器端我得到一個JSON格式的響應表單提交和驗證..jQuery的形式提交與sucess和錯誤消息

我在一個jQuery的對話框,顯示消息,但不能夠顯示來自服務器的消息....

我的方法:

<script type="text/javascript"> 
//<![CDATA[ 
    $.validator.setDefaults({ 
    submitHandler: function() { 
     var spogName   = $("input#spogname").val(); 
     var spogDis   = $("input#spogdescription").val(); 
     var dataString   ='&spogName='+ spogName +'&spogDescription=' + spogDis; 
     $.ajax({ 
      url: "/cpsb/spogMaster.do?method=addSpog",  
      type: "POST",   
      data: dataString,   
      cache: false, 
      success: function() { 
       $("#dialog-message").dialog({ 
        resizable:false, 
        height:180, 
        modal: true, 
        buttons: { 
         Ok: function() { 
          $(this).dialog('close'); 
         } 
        } 
       }); 

       }, 

      error: function() { 
      }      
     }); 
    }, 
    highlight: function(input) { 
     $(input).addClass("ui-state-highlight"); 
    }, 
    unhighlight: function(input) { 
     $(input).removeClass("ui-state-highlight"); 
    } 
}); 

$(document).ready(function() { 
    navMenu(); 
    $("#spogForm").validate({ 
     rules: { 
      spogname:{ 
      required: true 
      } 
     }, 
     messages: { 
      spogname: "Please enter the Spog Name" 
     } 
    }); 

    $(":submit").button(); 
}); 
//]]> 
</script> 

我的標記:

<div id="dialog-message" title="Spog Message" style="display:none;"> 
    <p> 
     <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 
     Spog added successfully! 
    </p> 
</div> 
<div id="header"><jsp:include page="../menu_v1.jsp"/></div> 
<div id="mainContent"> 
<div id="spog_form"> 
    <form class="cmxform" id="spogForm" method="post" action="/cpsb/spogMaster.do?method=addSpog"> 
    <fieldset class="ui-widget ui-widget-content ui-corner-all"> 
     <legend class="ui-widget ui-widget-header ui-corner-all">ADD SPOG</legend> 
     <p> 
      <label for="spogname">Spog Name (required)</label> 
      <input id="spogname" name="spogName" class="required ui-widget-content" minlength="2" /> 
     </p> 
     <p> 
      <label for="spogdescription">Spog Description </label> 
      <input id="spogdescription" name="spogDescription" class="spogD ui-widget-content" /> 
     </p> 

     <p> 
      <button class="submit" type="submit">Submit</button> 
     </p> 
    </fieldset> 
</form> 
</div> 
</div> 
</body> 

JSON字符串我正在如果spog在數據庫中存在:

{"messageId":"errorMessage","message":"spog found with Name 10000 Description nuts"} 

更新1:

<script type="text/javascript"> 
//<![CDATA[ 
    $.validator.setDefaults({ 
    submitHandler: function() { 
     var spogName   = $("input#spogname").val(); 
     var spogDis   = $("input#spogdescription").val(); 
     $.ajax({ 
      url: "/cpsb/spogMaster.do?method=addSpog",  
      type: "POST",  
      datatype:'json',  
      data: { 
       method:"addSpog", 
       spogName:spogName, 
       spogDescription:spogDis 
      },  
      cache: false, 
      success: function(data) { 
       if (data.messageId === 'errorMessage') { 
       // server responded with an error, show the error placeholder 
       // fill in the error message, and spawn the dialog 
       $("#dialog-message") 
        .find('.success').hide().end() 
        .find('.error').show() 
        .find('.message').text(data.message).end() 
        .end() 
        .dialog({ 
        resizable:false, 
        height:180, 
        modal: true, 
        buttons: { 
         Ok: function() { 
         $(this).dialog('close'); 
         } 
        } 
        }); 
       } else { 
       // server liked it, show the success placeholder and spawn the dialog 
       $("#dialog-message") 
        .find('.error').hide().end() 
        .find('.success').show().end() 
        .dialog({ 
        resizable:false, 
        height:180, 
        modal: true, 
        buttons: { 
         Ok: function() { 
         $(this).dialog('close'); 
         } 
        } 
        }); 
       } 
      } 
     }); 
    }, 
    highlight: function(input) { 
     $(input).addClass("ui-state-highlight"); 
    }, 
    unhighlight: function(input) { 
     $(input).removeClass("ui-state-highlight"); 
    } 
}); 

$(document).ready(function() { 
    navMenu(); 
    $("#spogForm").validate({ 
     rules: { 
      spogname:{ 
      required: true 
      } 
     }, 
     messages: { 
      spogname: "Please enter the Spog Name" 
     } 
    }); 


    $(":submit").button(); 
}); 
//]]> 
</script> 

標記:

<div id="dialog-message" title="Spog Message" style="display:none;"> 
    <p class="success"> 
     <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 
     Spog added successfully! 
    </p> 
    <p class="error"> 
     An error occurred while adding spog: 
     <span class="message"></span> 
    </p> 
</div> 
+0

什麼是你的服務器端的代碼? – 2010-09-15 15:46:11

+0

你的代碼中有一個明顯的錯誤:你可以像jqGrid一樣使用'datatype'。 'jQuery.ajax'參數是'dataType'。此外,在'error'句柄中至少包含'alert(「error!」)''。 – Oleg 2010-09-17 08:01:42

+0

我會建議你在返回錯誤時返回一些錯誤的HTTP狀態代碼(請參見http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/Servlet-Tutorial-Response-Status-Line.html )。 'HttpServletResponse'具有'setStatus'或'sendError'方法(請參閱http://www.java2s.com/Code/JavaAPI/javax.servlet.http/HttpServletResponse.htm),您可以使用它。例如'HttpServletResponse.SC_BAD_REQUEST'會更好,因爲200(OK)。您還應該嘗試在您的servlet中引發異常,並檢查數據是如何進入''ajax'的'error'句柄。你可以調用'JSON.Parse'來解碼錯誤響應。 – Oleg 2010-09-17 08:31:21

回答

2

作爲@Sam筆記,你需要調整你的成功回調,你還需要調整你的HTML一點。

<div id="dialog-message" title="Spog Message" style="display:none;"> 
    <p class="success"> 
     <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 
     Spog added successfully! 
    </p> 
    <p class="error"> 
     An error occurred while adding spog: 
     <span class="message">placeholder</span> 
    </p> 
</div> 

然後JS變化...

success: function(data) { 
    if (data.messageId && data.messageId === 'errorMessage') { 
    // server responded with an error, show the error placeholder 
    // fill in the error message, and spawn the dialog 
    $("#dialog-message") 
     .find('.success').hide().end() 
     .find('.error').show() 
     .find('.message').text(data.message).end() 
     .end() 
     .dialog({ 
     resizable:false, 
     height:180, 
     modal: true, 
     buttons: { 
      Ok: function() { 
      $(this).dialog('close'); 
      } 
     } 
     }); 
    } else { 
    // server liked it, show the success placeholder and spawn the dialog 
    $("#dialog-message") 
     .find('.error').hide().end() 
     .find('.success').show().end() 
     .dialog({ 
     resizable:false, 
     height:180, 
     modal: true, 
     buttons: { 
      Ok: function() { 
      $(this).dialog('close'); 
      } 
     } 
     }); 
    } 
}, 
+0

以及我試過你的建議,但它仍然顯示我spog添加成功,而不是顯示服務器響應{「messageId」 :「errorMessage」,「message」:「使用名稱10000描述玩具發現的spog」} – paul 2010-09-15 17:38:54

+0

您是否正確地將「success:function(){」更改爲「success:function(data){」?假設你的服務器正在給出正確的「application/json」內容類型頭並寫出數據,它應該正常工作。 – BBonifield 2010-09-15 18:33:45

+0

是的,我更改爲函數(數據)..請檢查我更新的js,如上面建議 – paul 2010-09-15 20:46:00

1

添加以下上面的 「成功」:datatype: "json",

然後將成功改爲如下所示:

success: function(data) { 
    $("#dialog-message").append('<p>'+data.message+'</p>').dialog({ 
     resizable:false, 
     height:180, 
     modal: true, 
     buttons: { 
      Ok: function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
}, 

基本上你需要;
一)告訴你的代碼,你的服務器將返回JSON(並且因此應EVAL吧)
B)做一些與JSON - 例如拉出消息,並將其附加到您的對話框

請理解,上面的代碼只是一個建議,我還沒有測試過!

+1

出於好奇:我爲什麼被低估? – Sam 2010-09-15 16:15:15

+0

實際上是一個意外。我試圖取消加票,但它倒是投了票。 – BBonifield 2010-09-15 16:26:43

+0

編輯你的答案,我可以反而投它:) – BBonifield 2010-09-15 16:31:34