grails_Grails AJAX示例

关注

翻译最新推荐文章于 2021-08-06 10:47:31 发布 183 阅读 AI 写同款· GEO 优化 ›

grails

早期，Grails的新手会遇到缺少该框架附带的工作示例的情况。示例和文档的好地方包括Grails文档和博客。

Ajax是Grails内置支持的功能之一。一旦人们“熟悉”了Grails的基础知识，他们通常就希望转向Ajax等更有趣的功能。这通常需要搜索网络，查找示例和/或仔细阅读文档。我经历了这个过程，发现其他人可能会从Grails中的一组简短的ajax示例中受益。我创建了一个小应用程序，该应用程序演示了一些Ajax功能并提供了该应用程序以供有兴趣的人下载。（请参阅底部下载

信息）

示例应用程序使用以下每个：

FormRemote
远程链接
SubmitToRemote
遥控功能
远程字段

一般步骤

选择您的javascript库-我的示例中使用的原型。还显示了一些Ajax事件注册。

function showSpinner(visible) {
         $('spinner').style.display = visible ? "inline" : "none";
     }
     Ajax.Responders.register({
     onLoading: function() {
           showSpinner(true);
     },
     onComplete: function() {
     if(!Ajax.activeRequestCount) showSpinner(false);
     }
   });

- 使用所需的任何代码更新您的控制器-以下是我的整个BookController

package ajax

class BookController {

     def scaffold = true

  def showEditAjax = {
   render (view:'editAjax', model:[bookInstance:Book.get(params.id)])
  }

  def showListSelect = {
   render (view:'listSelect', model:[bookInstanceList:Book.list()])
  }

  def showTitleSearch = {
   render (view:'titleSearchAjax')
  }

  def showRemoteLink = {
   render (view:'remoteLink', model:[bookInstanceList:Book.list()])
  }

  def showDetails = {
   render(template:'bookDetails', model:[bookInstance:Book.get(params.id)])
  }

  def showSearch = {
   render (view:'searchAjax')
  }

  def String wrapSearchParm(value) {
   '%'+value+'%'
  }

  def searchTitle = {
   def list = Book.findAllByTitleIlike(wrapSearchParm(params.searchvalue))
   render(template:'searchResults', model:[searchresults:list])
  }

  def search = {
   def list
   if (params.publisher && params.title)
    list = Book.findAllByTitleIlikeAndPublisherIlike(wrapSearchParm(params.title), wrapSearchParm(params.publisher))
   else if (params.publisher)
    list = Book.findAllByPublisherIlike(wrapSearchParm(params.publisher))
      else if (params.title)
       list = Book.findAllByTitleIlike(wrapSearchParm(params.title))

   render(template:'searchResults', model:[searchresults:list])
  }

  def listByPublisher = {
   def list
   if (params.filter.equals("All"))
    list = Book.list()
    else
      list = Book.findAllByPublisher(params.filter)

   render(template:'searchResults', model:[searchresults:list])
  }

 def update = {
  def bookInstance = Book.get( params.id )
  if(bookInstance) {
   bookInstance.properties = params
   if(!bookInstance.hasErrors() && bookInstance.save()) {
    render "
 Book ${params.title} updated with Ajax using FormRemote"
   }
   else {
    render(view:'edit',model:[bookInstance:bookInstance])
   }
  }
  else {
   flash.message = "Book not found with id ${params.id}"
   redirect(action:edit,id:params.id)
  }

  }

}

创建/更新视图–查看下面的屏幕截图和/或下载应用程序

大多数示例都是相当简单的，不需要太多解释。它们可能不是伟大的“现实世界”示例，但其目的是为某人提供一个可行的示例。

FormRemote

formRemote标签库创建一个表单标签，该标签使用远程uri执行ajax调用。在这种情况下，我略微修改了默认生成的edit.gsp，将form标记更改为formRemote标记，并添加了div以显示编辑结果。下面的屏幕快照显示了以下结果：首先单击Form Remote导航菜单按钮，更改“ Grails in Action”书中的页数，然后按屏幕底部的Update按钮。

远程链接

单击“ RemoteLink”标记会创建一个调用远程功能的链接。在示例应用程序中，我显示了书名列表，书名是一个链接。单击标题会在屏幕底部显示书的详细信息。

<g:each in="${bookInstanceList}" status="i" var="bookInstance">
    <g:remotelink action="showDetails" id="${bookInstance.id}" oncomplete="showSpinner(false);" onloading="showSpinner(true);" update="bookDetails">${fieldValue(bean: bookInstance, field: "title")}</g:remotelink>   
</g:each>

SubmitToRemote

SubmitToRemote标记创建一个按钮，该按钮将周围的表单作为远程Ajax调用提交，从而将字段序列化为参数。在示例应用程序中，我为“标题”和“发布者”创建了搜索字段。搜索按钮是使用SubmitToRemote标签库创建的，以使用Ajax提交搜索参数。

<g:form action="search"><table><tbody>
<tr class="prop">             <td class="name" valign="top">Title:</td>             <td class="value" valign="top"><input name="title" value="${title}" type="text"></td>          </tr>
<tr class="prop">             <td class="name" valign="top">Publisher:</td>             <td class="value" valign="top"><input name="publisher" value="${publisher}" type="text"></td>          </tr>
</tbody>      </table><g:submittoremote oncomplete="showSpinner(false)" onloading="showSpinner(true)" update="searchresults" url="[controller:'book', action:'search']" value="Search">
</g:submittoremote></g:form>

遥控功能

示例应用程序使用RemoteFunction标签库创建分配给onChange DOM事件的远程javascript函数。当用户选择或更改“出版者”下拉列表中的值时，将调用远程功能，并且屏幕的下半部分显示由所选出版者出版的书籍。

远程字段

该示例应用程序使用RemoteField taglib来动态搜索Book标题，类似于Google Instant。在“标题搜索”字段中键入值时，屏幕将返回搜索结果。在这种情况下，控制器代码用通配符（％）包装搜索参数以搜索数据库，并返回所有要显示的匹配项。

<div id="searchbox">Title Search:
<g:remotefield name="search" oncomplete="showSpinner(false);" onloading="showSpinner(true);" paramname="searchvalue" update="searchresults" url="[controller:'book', action:'searchTitle']">
</g:remotefield></div>

遇到的问题

我遇到了尝试使微调器正确显示的问题，直到我在StackOverflow上找到了该条目，该条目显示了如何注册Ajax事件。当在同一盒子上本地运行时，这发生得非常快，因此，如果要查看微调框，则确实需要注意屏幕的右上角。
由于语法问题，我也遇到了RemoteFunction的问题。习惯了标签库之后，我在应该更新语法“ mydiv”的情况下使用update =” mydiv”设置了update参数。这没有标记为错误。控制器被调用了，它从未更新目标div！