Groovy轻松入门——Grails实战之Ajax篇
来源:互联网 发布:飞鱼网络电视tv版 官网 编辑:程序博客网 时间:2024/06/05 06:28
Ajax虽是“旧酒装新瓶”,但其威力着实不小。近两年来可谓红透半边天,它之所以能为大众接受,其中一个很大的原因就是提高了用户浏览体验,能更逼真的模拟出GUI界面。好了,Ajax的益处就说到这里,下面让我们看下Grails是如何帮助我们方便地应用Ajax的:
如果您对下面说设计的内容有点不解,那么您可以先看一下 Groovy轻松入门——Grails实战基础篇,然后开始我们的Ajax之旅。
1, 在命令行中输入:“grails create-app AjaxDemo”(注意:不带引号“”)创建一个Grails project,我将它命名为AjaxDemo:
D:/Temp/grails_apps>grails create-app AjaxDemo
Welcome to Grails 0.5 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: D:/D/MY_DEV/grails-0.5Base Directory: D:/Temp/grails_apps
Environment set to production
Note: No plugin scripts found
Running script D:/D/MY_DEV/grails-0.5/scripts/CreateApp.groovy
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/src
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/src/java
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/src/groovy
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/src/test
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/controllers
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/jobs
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/services
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/domain
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/taglib
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/utils
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/views
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/views/layouts
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/i18n
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-app/conf
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/grails-tests
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/scripts
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/js
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/css
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/images
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/classes
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/META-INF
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/lib
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/spring
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/hibernate
[propertyfile] Creating new property file: D:/Temp/grails_apps/AjaxDemo/application.properties
[copy] Copying 2 files to D:/Temp/grails_apps/AjaxDemo
[copy] Copying 2 files to D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF
[copy] Copying 5 files to D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/tld
[copy] Copying 119 files to D:/Temp/grails_apps/AjaxDemo/web-app
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/grails-app/conf
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/grails-app/conf
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/grails-app/conf
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/grails-app/conf
[copy] Copying 13 files to D:/Temp/grails_apps/AjaxDemo/grails-app
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/plugins/core/grails-app/taglib
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/plugins/core/grails-app/utils
[copy] Copying 7 files to D:/Temp/grails_apps/AjaxDemo/plugins/core/grails-app/taglib
[copy] Copying 4 files to D:/Temp/grails_apps/AjaxDemo/plugins/core/grails-app/utils
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/spring
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo
[propertyfile] Updating property file: D:/Temp/grails_apps/AjaxDemo/application.properties
Created Grails Application at D:/Temp/grails_apps/AjaxDemo
D:/Temp/grails_apps>
2,“cd AjaxDemo”,进入AjaxDemo目录,输入“grails create-domain-class User”,创建一个域类User:
D:/Temp/grails_apps/AjaxDemo>grails create-domain-class UserWelcome to Grails 0.5 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: D:/D/MY_DEV/grails-0.5Base Directory: D:/Temp/grails_apps/AjaxDemo
Environment set to production
Running script D:/D/MY_DEV/grails-0.5/scripts/CreateDomainClass.groovy
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/grails-app/domain
Created for User
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/grails-tests
Created Tests for User
D:/Temp/grails_apps/AjaxDemo>
3,“grails generate-all User”,生成scaffolding code(如:list.gsp等):
D:/Temp/grails_apps/AjaxDemo>grails generate-all User
Welcome to Grails 0.5 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: D:/D/MY_DEV/grails-0.5Base Directory: D:/Temp/grails_apps/AjaxDemo
Environment set to production
Running script D:/D/MY_DEV/grails-0.5/scripts/GenerateAll.groovy
Compiling sources
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/lib
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/spring
[copy] Copying 34 files to D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/lib
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/grails-app/i18n
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/grails-app/views
[copy] Copying 2 files to D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/grails-app/views
[mkdir] Created dir: D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/templates/scaffolding
[copy] Copying 5 files to D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/templates/scaffolding
[native2ascii] Converting 7 files from D:/Temp/grails_apps/AjaxDemo/grails-app/i18n toD:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/grails-app/i1
8n
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/spring
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/classes
[copy] Copying 1 file to D:/Temp/grails_apps/AjaxDemo/web-app/WEB-INF/classes
Generating views for domain class [User]
Generating list view for domain class [User]
list view generated at D:/Temp/grails_apps/AjaxDemo/./grails-app/views/user/list.gsp
Generating show view for domain class [User]
Show view generated at D:/Temp/grails_apps/AjaxDemo/./grails-app/views/user/show.gsp
Generating edit view for domain class [User]
Edit view generated at D:/Temp/grails_apps/AjaxDemo/./grails-app/views/user/edit.gsp
Generating create view for domain class [User]
Create view generated at D:/Temp/grails_apps/AjaxDemo/./grails-app/views/user/create.gsp
Generating controller for domain class [User]
Controller generated at ./grails-app/controllers/UserController.groovy
D:/Temp/grails_apps/AjaxDemo>
4,修改AjaxDemo/grails-app/controllers/UserController.groovy的内容为:
class UserController {
def index = { redirect(action:list,params:params) }// the delete, save and update actions only
// accept POST requests
def allowedMethods = [delete: ' POST ' ,
save: ' POST ' ,
update: ' POST ' ]def list = {
if ( ! params.max)params.max = 10
[ userList: User.list( params ) ]
}def show = {
[ user : User.get( params.id ) ]
}def delete = {
def user = User.get( params.id )
if (user) {
user.delete()
flash.message = " User ${params.id} deleted. "
redirect(action:list)
}
else {
flash.message = " User not found with id ${params.id} "
redirect(action:list)
}
}def edit = {
def user = User.get( params.id )if ( ! user) {
flash.message = " User not found with id ${params.id} "
redirect(action:list)
}
else {
return [ user : user ]
}
}def update = {
def user = User.get( params.id )
if (user) {
user.properties = params
if (user.save()) {
redirect(action:show,id:user.id)
}
else {
render(view: ' edit ' ,model:[user:user])
}
}
else {
flash.message = " User not found with id ${params.id} "
redirect(action:edit,id:params.id)
}
}def create = {
def user = new User()
user.properties = params
return [ ' user ' :user]
}def save = {
def user = new User()
user.properties = params
if (user.save()) {
redirect(action:show,id:user.id)
}
else {
render(view: ' create ' ,model:[user:user])
}
}// 自己添加的Closure ajax定义
def ajax = {}
// 自己添加的Closure sayHello定义
def sayHello = {
render " [${new Date()}] Hello, ${params.name} "
}}
添加sayHello闭包的目的很明显,因为客户端需要调用。那为什么还要添加ajax这个闭包呢?其实添加 ajax 这个闭包的目的是使http://localhost:8080/AjaxDemo/user/ ajax 这个请求合法化,否则会发生404错误,找不到页面:
HTTP ERROR: 404
Not Found
RequestURI=/AjaxDemo/user/ajax
Powered by Jetty://
所以被客户端请求的 每个 gsp页面,都需要在相应的Controller中添加以gsp文件名为变量名的Closure,如上面的ajax.gsp和ajax = {}所示,其中Closure中可以添加相关代码,我们这里仅仅是做Ajax的演示,所以就不需要代码
5,在AjaxDemo/grails-app/views/user目录下,新建ajax.gsp,用来演示remoteLink的用法,内容为:
< g:javascript library ="prototype" />
< div id ="hello" > Content will be displayed here </ div >< g:remoteLink action ="sayHello" params ="[name:'BlueSUN']"
update ="hello" >Say Hello </ g:remoteLink >
params表示要传递的参数,而update表示返回结果显示的地方,注意update="hello"中的hello对应于div的id,表示结果将显示于div所在处。
点击链接后的界面:
[Fri May 11 17:46:47 CST 2007] Hello, BlueSUN
Say Hello
6,修改AjaxDemo/grails-app/views/user/ ajax.gsp,演示formRemote的用法,内容为:
<g:javascript library="prototype" />
<div id="hello">Content will be displayed here</div>
<div id="error"></div><g:remoteLink action="sayHello" params="[name:'BlueSUN']"
update="hello">Say Hello</g:remoteLink>
<hr />
<g:formRemote name="test" url="[controller:'user',action:'sayHello']"
update="[success:'hello',failure:'error']">
<input type="text" name="name" value="BlueSUN" />
<input type="submit" value="Say Hello" />
</g:formRemote >
原本用params传递的参数,现在可以以form的形式传递了,将想传递的内容输入name的textfield中即可。
默认值我设为BlueSUN,现在我将值改为terry,点击Say Hello按钮,结果如下:
[Fri May 11 18:16:17 CST 2007] Hello, terry
Say Hello
7,修改AjaxDemo/grails-app/views/user/ ajax.gsp和AjaxDemo/grails-app/controllers/UserController.groovy,演示remoteField的用法:
ajax.gsp:
<g:javascript library="prototype" />
<div id="hello">Content will be displayed here</div>
<div id="error"></div><g:remoteLink action="sayHello" params="[name:'BlueSUN']"
update="hello">Say Hello</g:remoteLink>
<hr />
<g:formRemote name="test" url="[controller:'user',action:'sayHello']"
update="[success:'hello',failure:'error']">
<input type="text" name="name" value="BlueSUN" />
<input type="submit" value="Say Hello" />
</g:formRemote ><hr />
<g:remoteField action="sayHello2" update="hello" name="name" value="" />
UserController.groovy:
class UserController {
def index = { redirect(action:list,params:params) }// the delete, save and update actions only
// accept POST requests
def allowedMethods = [delete:'POST',
save:'POST',
update:'POST']def list = {
if(!params.max)params.max = 10
[ userList: User.list( params ) ]
}def show = {
[ user : User.get( params.id ) ]
}def delete = {
def user = User.get( params.id )
if(user) {
user.delete()
flash.message = "User ${params.id} deleted."
redirect(action:list)
}
else {
flash.message = "User not found with id ${params.id}"
redirect(action:list)
}
}def edit = {
def user = User.get( params.id )if(!user) {
flash.message = "User not found with id ${params.id}"
redirect(action:list)
}
else {
return [ user : user ]
}
}def update = {
def user = User.get( params.id )
if(user) {
user.properties = params
if(user.save()) {
redirect(action:show,id:user.id)
}
else {
render(view:'edit',model:[user:user])
}
}
else {
flash.message = "User not found with id ${params.id}"
redirect(action:edit,id:params.id)
}
}def create = {
def user = new User()
user.properties = params
return ['user':user]
}def save = {
def user = new User()
user.properties = params
if(user.save()) {
redirect(action:show,id:user.id)
}
else {
render(view:'create',model:[user:user])
}
}// 自己添加的Closure ajax定义
def ajax = {}
// 自己添加的Closure sayHello定义
def sayHello = {
render "[${new Date()}] Hello, ${params.name}"
}
// 自己添加的Closure sayHello2定义
def sayHello2 = {
render "[${new Date()}] Hello, ${params.value}"
}}
由于 用remoteField传递过来的参数名为value,又为了保留以前的演示,所以再定义一个sayHello2闭包,注意是params.value而非params.name
输入“BlueSUN” ,请注意输入时页面的相应更新效果,结果界面:
输入到一半,即输入“Blue”
[Fri May 11 18:34:03 CST 2007] Hello, Blue
Say Hello
紧接着输入“SUN”
[Fri May 11 18:32:42 CST 2007] Hello, BlueSUN
Say Hello
8,修改AjaxDemo/grails-app/views/user/ ajax.gsp,演示remoteFunction的用法,内容为:
<g:javascript library="prototype" />
<div id="hello">Content will be displayed here</div>
<div id="error"></div><g:remoteLink action="sayHello" params="[name:'BlueSUN']"
update="hello">Say Hello</g:remoteLink>
<hr />
<g:formRemote name="test" url="[controller:'user',action:'sayHello']"
update="[success:'hello',failure:'error']">
<input type="text" name="name" value="BlueSUN" />
<input type="submit" value="Say Hello" />
</g:formRemote ><hr />
<g:remoteField action="sayHello2" update="hello" name="name" value="" />
<hr />
<button onClick="${remoteFunction(action:'sayHello',
update:[success:'hello', failure:'error'], params:'/'name=/' + /'BlueSUN/'')}">
Say Hello</button>
点击Say Hello按钮后,结果页面:
[Fri May 11 18:48:37 CST 2007] Hello, BlueSUN
Say Hello
Say Hello
9,Grails也可以利用Ajax异步显示Server端返回的页面,新建页面AjaxDemo/grails-app/views/user/result.gsp:
< html >
< head >
< meta http-equiv ="Content-Type"
content ="text/html; charset=UTF-8" />
< meta name ="layout" content ="main" />
< title > Result Page </ title >
</ head >
< body >
< div class ="nav" >
< span class ="menuButton" >
< a href ="${createLinkTo(dir:'')}" > Home </ a ></ span >
</ div >
< div class ="body" >
< h1 > ${name} </ h1 >
</ div >
</ body >
</ html >
修改AjaxDemo/grails-app/controllers/UserController.groovy:
class UserController {
def index = { redirect(action:list,params:params) }// the delete, save and update actions only
// accept POST requests
def allowedMethods = [delete: ' POST ' ,
save: ' POST ' ,
update: ' POST ' ]def list = {
if ( ! params.max)params.max = 10
[ userList: User.list( params ) ]
}def show = {
[ user : User.get( params.id ) ]
}def delete = {
def user = User.get( params.id )
if (user) {
user.delete()
flash.message = " User ${params.id} deleted. "
redirect(action:list)
}
else {
flash.message = " User not found with id ${params.id} "
redirect(action:list)
}
}def edit = {
def user = User.get( params.id )if ( ! user) {
flash.message = " User not found with id ${params.id} "
redirect(action:list)
}
else {
return [ user : user ]
}
}def update = {
def user = User.get( params.id )
if (user) {
user.properties = params
if (user.save()) {
redirect(action:show,id:user.id)
}
else {
render(view: ' edit ' ,model:[user:user])
}
}
else {
flash.message = " User not found with id ${params.id} "
redirect(action:edit,id:params.id)
}
}def create = {
def user = new User()
user.properties = params
return [ ' user ' :user]
}def save = {
def user = new User()
user.properties = params
if (user.save()) {
redirect(action:show,id:user.id)
}
else {
render(view: ' create ' ,model:[user:user])
}
}// 自己添加的Closure ajax定义
def ajax = {}
// 自己添加的Closure sayHello定义
def sayHello = {
render " [${new Date()}] Hello, ${params.name} "
}
// 自己添加的Closure sayHello2定义
def sayHello2 = {
render " [${new Date()}] Hello, ${params.value} "
}
// 自己添加的Closure displayResultPage定义
def displayResultPage = {
render(view: ' result ' , model:[name:params.name])
}
}
修改AjaxDemo/grails-app/views/user/ajax.gsp:
< g:javascript library ="prototype" />
< div id ="hello" > Content will be displayed here </ div >
< div id ="error" ></ div >< g:remoteLink action ="sayHello" params ="[name:'BlueSUN']"
update ="hello" > Say Hello </ g:remoteLink >
< hr />
< g:formRemote name ="test" url ="[controller:'user',action:'sayHello']"
update ="[success:'hello',failure:'error']" >
< input type ="text" name ="name" value ="BlueSUN" />
< input type ="submit" value ="Say Hello" />
</ g:formRemote >< hr />
< g:remoteField action ="sayHello2"
update ="hello" name ="name" value ="" />
< hr />
< button onClick ="${remoteFunction(action:'sayHello',
update:[success:'hello', failure:'error'], params:'/'name=/' + /'BlueSUN/'')}"
> Say Hello </ button >
< hr />
< g:formRemote name ="test" url ="[controller:'user',action:'displayResultPage']"
update ="[success:'hello',failure:'error']" >
< input type ="text" name ="name" value ="BlueSUN" />
< input type ="submit" value ="Say Hello" />
</ g:formRemote >
输入“terry”,点击Say Hello按钮,结果页面(样式的丢失是因为在ajax.gsp中没有声明css,目的是抓重点,抛开一切琐碎的内容):
最后要提醒大家一点,如果要使用中文,请将中文写在AjaxDemo/grails-app/i18n/messages_zh_CN.properties中,然后用<g:message code="key" />来显示。
- Groovy轻松入门——Grails实战之Ajax篇
- Groovy轻松入门——Grails实战之Ajax篇
- Groovy轻松入门——Grails实战之GORM篇
- Groovy轻松入门——Grails实战基础篇(1)
- Groovy轻松入门——Grails实战基础篇(2)
- Groovy轻松入门——Grails实战基础篇(3)
- Groovy轻松入门——Grails实战基础篇(4)
- Groovy轻松入门——Grails实战基础篇
- Groovy轻松入门——Grails实战之Web Flow篇
- Groovy轻松入门——搭建Groovy开发环境
- Groovy轻松入门——搭建Groovy开发环境
- Groovy轻松入门——搭建Groovy开发环境
- Groovy轻松入门——搭建Groovy开发环境
- Groovy语言 Grails框架入门
- Groovy语言 Grails框架入门
- Groovy轻松入门——通过与Java的比较,迅速掌握Groovy(1)
- Groovy轻松入门——通过与Java的比较,迅速掌握Groovy(2)
- Groovy轻松入门——通过与Java的比较,迅速掌握Groovy(3)
- Groovy轻松入门——Grails实战基础篇(1)
- Groovy轻松入门——Grails实战基础篇(2)
- Groovy轻松入门——Grails实战基础篇(3)
- Groovy轻松入门——Grails实战基础篇(4)
- Groovy轻松入门——Grails实战之GORM篇
- Groovy轻松入门——Grails实战之Ajax篇
- Groovy高效编程——统计单词频率
- SQL语言中 主外键关系
- Groovy高效编程——‘匕首方法’的使用
- Groovy高效编程——动态改变对象的能力(1)
- Groovy高效编程——动态改变对象的能力(2)
- 在Groovy1.0中使用闭包和集合
- Groovy轻松入门——Grails实战之Web Flow篇
- EJB的存根和骨架的工作原理(1)