通过 Grails 中的 AJAX 调用刷新 g:each 标签答案

【问题标题】：Refresh g:each tag via AJAX call in Grails通过 Grails 中的 AJAX 调用刷新 g:each 标签
【发布时间】：2016-07-31 21:04:18
【问题描述】：

我有一个显示最后注册用户的统计面板。我想实现一个 AJAX 调用来上传面板，而不必重新加载整个页面。

我认为有以下代码：

<g:each in="${lastUsers}" var="user">
     <div class="mt-comments">
         <div class="mt-comment">
              <div class="mt-comment-img">
                  <g:if test="${user?.avatar}">
                       <img src="${createLink(controller:'controllerUser',
                       action:'image', id: user?.id)}" />
                  </g:if>
                  <g:else>
                       <img class="img-circle"
                       src="${resource(dir: 'img/profile', file: 'user_profile.png')}"/>
                 </g:else>
              </div>
              <div class="mt-comment-body">
                 <div class="mt-comment-info">
                     <span class="mt-comment-author">${user?.username}</span>
                     <span class="mt-comment-date">
                        <g:formatDate date="${user?.dateCreated}"/>
                     </span>
                 </div>
                 <div class="mt-comment-text">${user?.email}</div>
                    <div class="mt-comment-details">
                       <g:if test="${user?.enabled}">
                       <span class="mt-comment-status label label-sm label-success circle">
                       </g:if>
                       <g:else>
                       <span class="mt-comment-status label label-sm label-info circle">
                       </g:else>
                       <g:formatBoolean boolean="${user?.enabled}"/>
                       </span>
                       <ul class="mt-comment-actions">
                         <li>
                             <g:link controller="user" action="edit" id="${user?.id}">Edit</g:link>
                         </li>
                       </ul>
                  </div>
              </div>
         </div>
    </div>
</g:each>

另外，我有一个按钮，当它被点击时会调用 AJAX 函数。 Ajax 函数以 JSON 格式接收成功的数据。从那里，我不知道上传我的 g:each 标签。

我已尝试使用 Grails 的 remoteFunction 来使用上传属性，但出现错误：未配置 javascript 提供程序，我已搜索解决方案，但一切正常。

AJAX 调用：

$('.button').click(function() {

     $.ajax({
       url: URL,     
       success: function(data) {

          console.log(data[index]);
          console.log(val.username);
          console.log(val.dateCreated);
          console.log(val.email);
          console.log(val.enabled);
          console.log(val.avatar);
          console.log(val.id);
       },
       error: function(){
       },
     });

谢谢你帮助我。

【问题讨论】：

@JChap 下面有正确答案...你要意识到所有 g: 标签都是在服务器端渲染成 HTML/javascript 等。并且只能在服务器上重新渲染.因此，下面的 AJAX 调用的结果是 HTML 来替换 userComments div 的内容。

标签： ajax grails each gsp grails-controller

【解决方案1】：

您可以使用 grails 模板和 jQuery 加载方法来代替 JSON 数据。这是一个快速 POC。

模板 (_userComments.gsp)

这将作为一个可重用的视图，可以通过 AJAX 调用或直接包含在其他视图中。

<g:each in="${lastUsers}" var="user">
     <div class="mt-comments">
         .....
    </div>
</g:each>

查看 (main.gsp)

我们的主视图。

<div class="userComments">
    <!-- When the Page is Loaded, We need render this without an Ajax Call -->
    <g:render template="userComments"  model="['lastUsers':lastUsers]"/>
</div>

Javascript

$('.button').click(function() {
   $( ".userComments" ).load( "user/userComments" );
});

控制器

我们定义了两种方法，一种用于主视图，另一种用于 ajax 调用。

def index() {
    def lastUsers = User.list();
    render(view:'main', model: [lastUsers: lastUsers])
}

// Ajax Call
def userComments() {
    def lastUsers = User.list(); // what ever your fetch logic is
    render(template:'userComments', model: [lastUsers: lastUsers])
}

【讨论】：