我有一个模态对话框,我从gsp加载一个表单,我正在努力为基于ajax的表单找到合适的解决方案,其中包含
JSON验证.成功消息,如闪存范围消息：
$('#calendar_form').live('click',function () {
$.modal({
ajax: './form',title: '${message(code:'calendar.main.addAppointment')}',overlayClose: true
});
});
在那个表单中我有以下JS：
$(document).ready(function() {
$('#form1').submit(function() {
$.ajax({
type: 'POST',url: '${createLink(action:'post')}',data: $("#form1").serialize(),success: function(result) {
alert(result);
}
});
});
});
我正在返回JSON响应,如果它成功并且发生错误时我需要Ajax,否则我的模态对话框由于新请求而消失.
所以这是我的问题：
>如何对我在控制器中验证期间发生的故障做出反应？
>我需要将哪些错误http代码用于控制器中的验证错误？
>如何使用表单中的错误消息更新特定字段？
>如何更新页面的flash部分以呈现成功消息？
>成功后如何更新页面的其他部分？
谢谢！
解决方法
有很多不同的方法可以实现这一点,可能还有一个或多个插件可以帮助您实现目标.但是,我会告诉你我一般如何处理这件事.我有一个看起来像这样的物体……
class AjaxPostResponse {
boolean success
String message
String html
def domainObject
def errors = [:]
}
这是我呈现为JSON的对象.因此,如果存在验证错误,则成功将变为false,并将所有错误添加到错误映射中.我在服务中执行此操作,该方法如下所示：
def preparePostResponse(domainInstance) {
def g = grailsApplication.mainContext.getBean('org.codehaus.groovy.grails.plugins.web.taglib.ApplicationTagLib')
def postResponse = new AjaxPostResponse(domainObject: domainInstance)
if (domainInstance.hasErrors()) {
g.eachError(bean: domainInstance) {
postResponse.errors."${it.field}" = g.message(error: it)
}
postResponse.success = false
postResponse.message = "There was an error"
} else {
postResponse.success = true
postResponse.message = "Success"
}
return postResponse
}
所以我的控制器看起来像
def save = {
def someObjInstance = new SomeObj(params)
someObjInstance.save(flush:true)
render myService.preparePostResponse(someObjInstance) as JSON
}
在我的客户端代码中,我做了类似的事情(使用jQuery表单插件,但这也适用于通用的$.ajax / $.post / $.get方法……
$(formElement).ajaxSubmit({
dataType: 'json',success: function(jsonData) {
if (jsonData.success) {
// do good stuff
} else {
// bad stuff happened
showErrors(jsonData.errors);
}
}
});
而我的showErrors功能
function showErrors(errors,element) {
var errorList = $("<ul>");
for (field in errors) {
errorList.append("<li>" + errors[field] + "</li>")
$('input[name=' + field + ']').addClass('error');
}
if (!element) {
$(".errors").html("").append(errorList).show(500);
} else {
$(element).html("").append(errorList).show(500);
}
}
希望有所帮助.