2010-09-15 502 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