我有一个AJAX函数,当我单击一个复选框时会调用它。通常,它会打开或关闭我页面的一部分。那很好,但是当发生错误时,即。当在某些情况下不允许单击该复选框时,我想通知AJAX这不成功。
我也不知道如何解决错误消息,使其显示在与Flash消息相同的位置。
如果我使用Flash消息,则需要再次重定向到同一页面,然后将页面放入其内部,这不是很好。
我确定那应该是解决这个问题的标准方法,因为我认为这是常见情况,还是...?
这是在这种情况下使用的 Controller 部分的方式:
def useWeeklyVolumes() {
println("useWeeklyVolumes - params: "+params)
def od = OfferDetail.get(params.id)
String status = od.offerHeader.status
if ((status == 'Sold') || (status == 'Rejected')) {
transactionStatus.setRollbackOnly()
return render(status: 400, text:"Offer can not be changed (Sold/Rejected)")
}
这就是AJAX调用的样子。
$(document).ready(function(){
$( document ).on('change', '.useWeeklyVolumes', function ( event ){
$.ajax({
url: '${g.createLink( controller:'offerDetail', action:'useWeeklyVolumes' )}',
data: {ckbWeeklyVolumes:this.checked, id:this.id},
type: 'get',
success: function ( data ) { $( '#nono' ).html( data ); },
error: function (jqXHR) {document.querySelector('#alert').innerHTML = jqXHR.responseText;
const timeoutID = window.setTimeout(() => {
messageBox.innerHTML = '';
window.clearTimeout(timeoutID);
}, 3000);}
});
});
});
这是我最近的尝试:
<script>
$(document).ready(function(){
$( document ).on('change', '.batman', function ( event ){
alert('Hej');
$.ajax({
url: '${g.createLink( controller:'person', action:'register' )}',
data: {registered:this.checked, id:this.id},
type: 'get',
success: function ( data ) { $( '#alert' ).html( data ); },
error: function (jqXHR) {const alert = document.querySelector('#alert').innerHTML = jqXHR.responseText;
const timeoutID = window.setTimeout(function() {
alert.innerHTML = '';
window.clearTimeout(timeoutID);
}, 3000);}
});
});
});
</script>
在gsp中,我添加了以下内容:
<span id="alert"></span>
错误消息将显示在此处,但将保留在那里,直到刷新为止。
最终的解决方案:
<script>
$(document).ready(function(){
$( document ).on('change', '.batman', function ( event ){
$.ajax({
url: '${g.createLink( controller:'person', action:'register' )}',
data: {registered:this.checked, id:this.id},
type: 'get',
success: function ( data ) { $( '#alert' ).html( data ); },
error: function (jqXHR) {const alert = document.querySelector('#alert');
alert.innerHTML = jqXHR.responseText;
const timeoutID = window.setTimeout(function() {
alert.innerHTML = '';
window.clearTimeout(timeoutID);
}, 3000);
}
});
});
});
具有独立错误功能的替代解决方案:
<script>
$(document).ready(function(){
$( document ).on('change', '.batman', function ( event ){
$.ajax({
url: '${g.createLink( controller:'person', action:'register' )}',
data: {registered:this.checked, id:this.id},
type: 'get',
success: function ( data ) { $( '#alert' ).html( data ); },
error: function (jqXHR) {displayAlertMessage(jqXHR.responseText)}
});
});
});
function displayAlertMessage(message) {
var timeOut = 5
jQuery('#alert').text(message).fadeIn()
jQuery('#alert').css("display", "block")
setTimeout(function() {
jQuery('#alert').fadeOut()
jQuery('#alert').css("display", "none")
}, timeOut * 1000);
}
</script>
请您参考如下方法:
如果您尝试在显示Flash消息的同一div中显示错误消息,并假定div具有警报ID,则可以执行以下操作
// Remember jquery ajax error function can accept this params
// Function( jqXHR jqXHR, String textStatus, String errorThrown )
const alert = document.querySelector('#alert');
alert.innertHTML = 'Some message';
const timeoutID = window.setTimeout(() => {
alert.innerHTML = '';
window.clearTimeout(timeoutID);
}, 3000);
这应该进入错误功能,该功能最多接受三个参数,如 http://api.jquery.com/jquery.ajax/文档所示。
这将显示一条您从数据中获取的消息,并在3秒钟后将其删除。
正如@bassmartin提到的,您可以在 Controller 中使用 render方法创建特定消息并定义状态。或者,如果您使用的Grails版本高于2.3,则可以使用 respond。
在使用“响应我”的第一个版本上,我不太清楚,如果您决定使用该选项,请先阅读您版本的文档




