Question

我正在尝试使用ajax发布对某个事件的评论，以避免重新加载页面。这是我发布评论的表格。

C:\Program Files\Haskell Platform\8.0.2\mingw\bin\

我的阿贾克斯：

<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"/>

ReviewController：

  $( "#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");
          }
      } );
  });

审核域名：

def saveReview(Review review) 
{
    User user = User.get(session.user.id)
    def comment = review?.comment
    def rating = review?.rating

    review.save flush:true
}

出现成功警报，但没有数据插入我的数据库。

Answer 1

使用Grails的一些例子。

以下所有人都在使用一些引导样式和消息在成功失败时更新div，我们也可以从操作中传回一些数据，并在需要时执行此操作。

当具有ID＆＃39;保存＆＃39;的按钮时，将调用javascript。点击。如果元素以句点为前缀，您将看到save以＃为前缀，表示带有标识符的DOM元素。它表示具有CSS类的元素，请阅读有关选择器here的更多信息。

您可以使用数据部分将数据传回控制器，在下面的示例中，我们使用serialize使用ID eventForm传回表单的所有元素，这样您就可以获得＆＃39; eventName的＆＃39;和＆＃39; eventDescription＆＃39;关闭控制器中的参数，因为这些是我们表格中的2个输入

在您的示例中，您尝试从gsp中的某些内容获取用户名，我会在springSecurityService的控制器中获取该用户名。

GSP：

<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

}

Answer 2

只是一个简单的例子

$.ajax({
            url: "/YourController/YourAction",
            type: 'POST',
            dataType: 'json',
            data: { val1: 1, val2: 2, val3: 3 },
            success: function (json) {

            }
        });

在你的Action中，你会返回一个Json，如下所示：

return Json(new { success = true, message = "Message"}, JsonRequestBehavior.AllowGet);

或者像这样聪明的东西，你的控件有类＆＃39; form-control＆＃39;。这与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) {

                }
});

如果您有任何任务，请询问=）

Grails：如何使用jQuery＆amp; ajax将数据发送到控制器

2 个答案: