Grails:如何使用jQuery和ajax向控制器发送数据
我试图使用ajax发布一个事件的评论，以避免页面重新加载。这是我张贴评论的表格。
<g:form >
<g:textArea class="form-control" id="review" name="comment" value="${review?.comment}"></g:textArea>
<span class="star-rating star-5">
<g:radio name="rating" id="rating-1" value="1"/><i></i>
<g:radio name="rating" id="rating-2" value="2"/><i></i>
<g:radio name="rating" id="rating-3" value="3"/><i></i>
<g:radio name="rating" id="rating-4" value="4"/><i></i>
<g:radio name="rating" id="rating-5" value="5"/><i></i>
</span>
...
<input type="submit" id="comment-ajax"/>我的ajax：
$( "#comment-ajax" ).click( function (){
var eventID = document.getElementById('eventId').innerText;
$.ajax( {
url: "${createLink(controller:'review',action:'saveReview')}",
type: "POST",
data: { comment: $('.review-textarea').val(), rating: $('input[name=rating]:checked').val(), event:eventID },
success: function() {
alert("success");
},
error: function() {
alert("fail");
}
} );
});ReviewController：
def saveReview(Review review)
{
User user = User.get(session.user.id)
def comment = review?.comment
def rating = review?.rating
review.save flush:true
}审阅域：
class Review {
String comment
int rating
static belongsTo = [event:Event, user:User]出现成功警告，但没有数据插入到我的数据库中。
回答 2
Stack Overflow用户
发布于 2017-04-21 05:28:02
一个使用一些Grails内容的节点示例。
下面我们所做的就是用一些bootstrap样式和一条消息在成功失败时更新div，我们还可以从操作中传回一些数据，如果需要的话，还可以用它做一些事情。
当ID为'save‘的按钮被点击时，javascript被调用。如果一个元素以句点为前缀，您将看到save是以#为前缀的，这意味着带有标识符的DOM元素。这意味着带有CSS类的元素，请阅读更多关于选择器here的内容。
您可以使用data部分将数据传回控制器，在下面的示例中，我们使用serialize传回ID为eventForm的表单的所有元素，因此您将从控制器中的参数中获得'eventName‘和'eventDescription’，因为这是我们表单中的两个输入
在您的示例中，您试图从gsp中的某个东西获取用户名，我将在控制器中从springSecurityService获取此用户名。
普惠制：
<head>
<script type="text/javascript">
$( document ).ready( function() {
$( "#save" ).click( function ( event ){
$.ajax( {
url: "${g.createLink( controller: 'review', action:'saveAjax')}",
type: "post",
data: $( '#eventForm' ).serialize(),
success: function() {
$( "#resultDiv" ).addClass( 'alert alert-info' ).append( 'Successfully saved event' )
},
error: function(xhr) {
$( "#resultDiv" ).addClass( 'alert alert-danger' ).append( 'Error saving event' )
}
} );
});
});
</script>
</head>
<body>
<div id="resultDiv"></div>
<g:form id="eventForm" name="eventForm">
Event name: <input type="text" id="eventName" name="eventName" value="${params.eventName}" />
Event description: <input type="text" id="eventDescription" name="eventDescription" value="${params.eventDescription}" />
<button type="button" id="save" name="save">Save</button>
</g:form>
</body>ReviewController：
def saveAjax() {
def eventName = params.eventName
def eventDescription = params.eventDescription
}Stack Overflow用户
发布于 2017-04-21 02:11:13
只有一个简单的例子
$.ajax({
url: "/YourController/YourAction",
type: 'POST',
dataType: 'json',
data: { val1: 1, val2: 2, val3: 3 },
success: function (json) {
}
});在您的操作中，您返回一个Json，如下所示：
return Json(new { success = true, message = "Message"}, JsonRequestBehavior.AllowGet);或者一些聪明的东西，像这样，你的控件有'form-control‘类。这有点类似于form.serialize()，但在这里您可以自定义数据的格式。
var selector = 'input.form-control, select.form-control, input[type="hidden"], textarea.form-control'
var formData = {};
$(selector).each(function () {
var value = '';
if ($(this).attr("type") == "checkbox") {
value = $(this).attr("checked") == "checked";
}
else if ($(this).attr("type") == "radio") {
if (formData[$(this).attr('id')] == undefined) {
value = $("#" + $(this).attr("id") + ":checked").val();
}
else
return true;
}
else {
value = $(this).val().toUpperCase();
}
formData[$(this).attr('id')] = value;
});
$.ajax({
type: "Post",
dataType: 'json',
url: "/YourController/YourAction",
data: formData,
traditional: true,
success: function (json) {
}
});如果你有任何要求，就问=)
https://stackoverflow.com/questions/43525751
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号