早期,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创建一个动态搜索书名的方法,类似于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!
资料下载
- 从此处下载一个zip
- 从Github获得一份副本 –这是我在Github上创建存储库的第一步,因此,如果我做错了,请告诉我。
放在一起很有趣。 希望对您有所帮助!
翻译自: https://www.javacodegeeks.com/2013/05/grails-ajax-examples.html