jQuery表单提交与成功和错误消息 [英] jQuery form submission with sucess and error message
本文介绍了jQuery表单提交与成功和错误消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在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，
类型：POST，
data：dataString，
cache： false，
成功：function（）{
$（＃dialog-message）。dialog（{
resizable：false，
height：180，
modal ：true，
按钮：{
OK：function（）{
$（this）.dialog（'close'）;
}
}
}）;
}，
错误：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
}
}，
消息：{
spogname：请输入Spog名称
}
}）;
$（：submit）。button（）;
}）;
//]]>
< / script>
我的标记：
< div id =dialog-messagetitle =Spog Messagestyle =display：none;>
< p>
< span class =ui-icon ui-icon-circle-checkstyle =float：left; margin：0 7px 50px 0;>< / span>
Spog添加成功！
< / p>
< / div>
< div id =header>< jsp：include page =../ menu_v1.jsp/>< / div>
< div id =mainContent>
< div id =spog_form>
< form class =cmxformid =spogFormmethod =postaction =/ cpsb / spogMaster.do？method = addSpog>
< fieldset class =ui-widget ui-widget-content ui-corner-all>
< p>
< label for =spogname> Spog Name（必填）< / label>
< input id =spognamename =spogNameclass =required ui-widget-contentminlength =2/>
< / p>
< p>
< label for =spogdescription> Spog描述< / label>
< input id =spogdescriptionname =spogDescriptionclass =spogD ui-widget-content/>
< / p>
< p>
< button class =submittype =submit>提交< / button>
< / p>
< / fieldset>
< / form>
< / div>
< / div>
< / body>
json字符串如果spog存在于数据库中，我会得到它：
{messageId：errorMessage，message：在名称10000中找到spog 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 ，
类型：POST，
数据类型：'json'，
数据：{
方法：addSpog，
spogName：spogName，
spogDescription：spogDis
}，
cache：false，
success：function（data）{$ b $ if（data.messageId ==='errorMessage'）{
/ / server响应一个错误，显示错误占位符
//填写错误消息，并产生对话框
$（＃dialog-message）
.find（'。success '）.hide（）。end（）
.find（'。error' ）.show（）
.find（'。message'）.text（data.message）.end（）
.end（）
.dialog（{
resizable： false，
height：180，
modal：true，
按钮：{
OK：function（）{
$（this）.dialog（'close'） ;
}
}
}）;
} else {
//服务器喜欢它，显示成功占位符并产生对话框
$（＃dialog-message）
.find（'。error'） .hide（）。end（）
.find（'。success'）。show（）。end（）
.dialog（{
resizable：false，
height： 180，
modal：true，
按钮：{
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
}
}，
消息：{
spogname：请输入Spog名称
}
}）;
$（：submit）。button（）;
}）;
//]]>
< / script>
标记：
< div id =dialog-messagetitle =Spog Messagestyle =display：none;>
< p class =success>
< span class =ui-icon ui-icon-circle-checkstyle =float：left; margin：0 7px 50px 0;>< / span>
Spog添加成功！
< / p>
< p class =error>
添加spog时发生错误：
< span class =message>< / span>
< / p>
< / div>
解决方案
作为@Sam笔记，您需要调整您的成功回调，并且您还需要调整您的HTML。
< div id =dialog-message title =Spog Messagestyle =display：none;>
< p class =success>
< span class =ui-icon ui-icon-circle-checkstyle =float：left; margin：0 7px 50px 0;>< / span>
Spog添加成功！
< / p>
< p class =error>
添加spog时发生错误：
< span class =message>占位符< / span>
< / p>
< / div>
然后JS更改...
<$ （data.messageId&& data.messageId ==='errorMessage'）{
//服务器响应一个错误，显示错误占位符
//填写错误信息，并产生对话框
$（＃dialog-message）
.find（'。success'）。hide （）.end（）
.find（'。error'）。show（）
.find（'。message'）.text（data.message）.end（）
。 end（）
.dialog（{
resizable：false，
height：180，
modal：true，
按钮：{
Ok：function ）{
$（this）.dialog（'close'）;
}
}
}）;
} else {
//服务器喜欢它，显示成功占位符并产生对话框
$（＃dialog-message）
.find（'。error'） .hide（）。end（）
.find（'。success'）。show（）。end（）
.dialog（{
resizable：false，
height： 180，
modal：true，
按钮：{
OK：function（）{
$（this）.dialog（'close'）;
}
}
}）;
}
}，
I am doing form submission and validation using jQuery and from server side I am getting a response in JSON format..
I am displaying the message in a jQuery dialog box but not able to show the message from server....
My approach:
<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>
My markup:
<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 string I am getting if spog existed in database:
{"messageId":"errorMessage","message":"spog found with Name 10000 Description nuts"}
Update 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>
Markup:
<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>
解决方案
As @Sam notes, you'll need to adjust your success callback, and you'd also need to adjust your HTML a bit.
<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>
Then the JS change...
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');
}
}
});
}
},
这篇关于jQuery表单提交与成功和错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
