jQuery的形式提交与sucess和错误消息
我做使用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>
作为@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');
}
}
});
}
},
以及我试过你的建议,但它仍然显示我spog添加成功,而不是显示服务器响应{“messageId” :“errorMessage”,“message”:“使用名称10000描述玩具发现的spog”} – paul 2010-09-15 17:38:54
您是否正确地将“success:function(){”更改为“success:function(data){”?假设你的服务器正在给出正确的“application/json”内容类型头并写出数据,它应该正常工作。 – BBonifield 2010-09-15 18:33:45
是的,我更改为函数(数据)..请检查我更新的js,如上面建议 – paul 2010-09-15 20:46:00
添加以下上面的 “成功”: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 - 例如拉出消息,并将其附加到您的对话框
请理解,上面的代码只是一个建议,我还没有测试过!
出于好奇:我为什么被低估? – Sam 2010-09-15 16:15:15
实际上是一个意外。我试图取消加票,但它倒是投了票。 – BBonifield 2010-09-15 16:26:43
编辑你的答案,我可以反而投它:) – BBonifield 2010-09-15 16:31:34
什么是你的服务器端的代码? – 2010-09-15 15:46:11
你的代码中有一个明显的错误:你可以像jqGrid一样使用'datatype'。 'jQuery.ajax'参数是'dataType'。此外,在'error'句柄中至少包含'alert(“error!”)''。 – Oleg 2010-09-17 08:01:42
我会建议你在返回错误时返回一些错误的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