`
MafiaDada
  • 浏览: 25602 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Grails, JQuery, and AJAX

阅读更多
By now, you’re probably under the impression that I love Grails, and you wouldn’t be far off from the truth. Ever since I started using it almost a year ago, I’ve continually been amazed by just how darn productive I can be. One of the aspects I want to touch on today is how Grails helps you build rich internet applications (RIA).

Grails out of the box uses Prototype for its JavaScript framework, which means that developers have a number of GSP taglibs available which will automatically generate Prototype code to make AJAX-y calls.

Unfortunately, I “grew up” using JQuery, and thus feel more comfortable using JQuery as my JS framework. Luckily, Grails “has a plugin for that.” This means that if you’ve been using the Grails taglibs to generate your remote calls, you can install the plugin and it will generate JQuery code instead. Great for when you switch out your JS frameworks midstream…am I right?

Anyway, back on topic. First, let’s install the JQuery plugin. The official documentation is here, but, as you’ll soon see, they are a little incomplete. There are a number of ways to get your plugin installed.

1. From the command prompt, you can type in grails install-plugin jquery
2. From STS, you can press ctrl+shift+alt+g to open up the integrated Grails command line and type install-plugin jquery
3. From STS, you can select your project and press alt+g+m and install the jquery plugin from the UI manager

There is some bug preventing the plugin installation process from copying over the requisite jquery-1.4.4.js and jquery-1.4.4.min.js files over to your /web-app/js directory so you’ll then need to run the following:

grails InstallJQuery

You should see something like:
引用
Downloading JQuery 1.4.4 ...
    [mkdir] Created dir: D:\Development\redShoe\live\web-app\js\jquery
      [get] Getting: http://code.jquery.com/jquery-1.4.4.js
      [get] To: D:\Development\redShoe\live\web-app\js\jquery\jquery-1.4.4.js
.................
      [get] Getting: http://code.jquery.com/jquery-1.4.4.min.js
      [get] To: D:\Development\redShoe\live\web-app\js\jquery\jquery-1.4.4.min.js
........
JQuery 1.4.4 installed successfully


Once that’s done, add the following to your Config.groovy:

grails.views.javascript.library="jquery"


Then, in the layouts (or individual pages) that you’re going to use JQuery:

<g:javascript library="jquery" plugin="jquery"/>


Now comes the fun stuff. When doing AJAX calls, you can either use the Grails tag of remoteFunction or just do everything using JQuery’s $.ajax. I find that if you want to do simple stuff like refreshing a div with callback data, remoteFunction works just fine. When you start wanting to do more complex stuff, I actually find working with JQuery directly easier (but less portable). Your arch will have to make that executive decision.

Anyway, let’s do a simple example. You have a select box with id “topic” that when you select an option, you want to go find a list of books related to that topic. Your remote function might look something like:

${remoteFunction(
	controller: 'book',
	action:'ajaxFindBooksByTopic',
	update:[success:'bookList', failure: 'errors'],
	params:'\'topicId=\'+$(\'#topic\').val()',
	onComplete:'somefunction();'
)}


To break it down, the remoteFunction has several components:
1. The controller determines which controller you’ll be hitting (in a MVC world)
2. The action defines which action on the controller you’ll be calling
3. The update field determines what div will be updated, either on success or failure
4. The params define the data you pass back. You’ll note that you have to do escaping of single quotes and a lot of random crap. This is one of the reasons why for more complicated stuff, I favor straight up JQuery.
5. The onComplete calls a JS function after everything is finished (whether it errored out or not)

In the example above, I made the remoteFunction actually query for the selected value on the “topic” selector. I can actually embed the remoteFunction directly on the selector’s onchange. If I do, the params would change to:

params:'\'topicId=\'+this.value'


On the controller side you would have a function such as:

def ajaxFindBooksByTopic = {
	render Book.findAllByTopic(Topic.get(params.topicId))*.name
}


This example is simple, so I haven’t done any validation of the params passed in, but I think you get the idea. Also, if you’ve never experience the magic of Groovy, I’m sure that line just blew your mind. Essentially, through GORM (think groovified Hibernate), I find all Book objects by the Topic field, which I find via the topicId. Then, I loop through the list that’s returned back to me and return a list of names, which I then render. The rendered list is then updated in the “bookList” div. Mind. Blown.

But what happens when you want to do more complex things, like get a list of JSON objects back which you can then manipulate using JQuery?

$.ajax({
	url:"${request.contextPath}/book/ajaxFindBooksByTopic",
	dataType: 'json',
	data: {
		topicId: $('#topic').val(),
	},
	success: function(data) {
		data.each(function() {
			doSomething();
		}
	},
	error: function(request, status, error) {

	},
	complete: function() {
		doSomethingElse();
	}
});


Fairly straightforward JQuery. What about our controller?

def ajaxFindBooksByTopic = {
	render Book.findAllByTopic(Topic.get(params.topicId)) as JSON
}


Mind. Blown. Again. Grails can just convert your list of objects into a list of JSON objects and pass it back to your view. Then, you can iterate through your data and do as you please on the front end.

Hopefully, after my long-winded babbling, you can see how powerful Grails and JQuery can be together in building rich internet applications.


Referrence Link:
http://alexduan.com/2011/02/17/grails-jquery-and-ajax/


分享到:
评论

相关推荐

    Grails Jquery 集成代码

    无论是DOM操作、事件处理、动画效果,还是Ajax通信,JQuery都能为你的Grails应用带来更优秀的交互体验。不过,要注意保持代码组织的清晰,避免过度依赖JQuery,适时考虑使用现代JavaScript库或框架,如React或Vue.js...

    grails ajax

    描述中的"javascript and ajax using in grails"强调了JavaScript在Grails应用中的重要性。JavaScript是实现Ajax交互的主要语言,通常用于处理用户交互和动态更新页面。Grails提供了与jQuery等流行JavaScript库集成...

    Grails 和 jQuery开发实例

    Grails是一个基于Java平台的全栈式框架,它简化了Web应用的开发过程,而jQuery则是一款强大的JavaScript库,能够帮助我们实现高效的DOM操作、事件处理以及Ajax交互。 首先,Grails的MVC架构使得开发者可以快速搭建...

    grails 使用ajax的例子

    在Grails中,可以通过在`head`标签内引入jQuery库,然后使用jQuery的`.ajax()`, `.post()`, `.get()`等方法进行Ajax请求。 4. **示例1:远程函数调用** 一个简单的例子是使用`&lt;g:remoteFunction&gt;`标签更新页面元素...

    精通 Grails 使用 Ajax 实现多对多关系

    这可以使用jQuery或其他Ajax库来实现,通过异步发送请求,获取和显示数据。 在实际应用中,多对多关系可能会更复杂。比如,书中提到的合同(Contract)类,它可以用来表示作者与书之间的具体协议,包含额外的属性如...

    Grails 下拉框联动最优实现

    在Grails中,我们可以利用AJAX技术实现这种交互,AJAX即异步JavaScript和XML,它允许页面在不刷新整个页面的情况下与服务器交换数据并局部更新页面内容。这正是实现联动效果的关键,因为它能让用户体验更加流畅,...

    Grails权威指南.pdf

    - **AJAX in Grails**:书中会介绍如何使用jQuery或其他库实现异步更新,提升用户体验。 - **Remote Function Calls (RFC)**:通过AJAX调用控制器的方法,实现页面部分更新。 6. **Java平台集成**: - **...

    grails-pjax:Grails Pjax插件云可帮助您在Grails中使用pjax

    Pjax是一个jQuery插件,它使用ajax和pushState通过真正的永久链接,页面标题和后退按钮提供快速浏览体验。 查看更多或访问 ##为什么要用Pjax? 只是使用ajax从远程加载容器? 是的,但不仅如此。 不再加载css和js...

    Apress.Pro.Ajax.and.Java.Frameworks.Jul.2006.HAPPY.NEW.YEAR

    2. **JavaScript库和框架**:Ajax技术离不开JavaScript的支持,书中可能会讨论jQuery、Prototype、MooTools等流行的JavaScript库,以及它们在处理Ajax请求和简化DOM操作上的应用。 3. **Java后端框架**:作为标题中...

    HelloGrails:通过使用 Grails 2 开发 TekDays.com 来学习和完善 Grails 技能

    在JavaScript方面,Grails 2支持AJAX和JSON,使得前后端交互更加顺畅,提高了用户体验。它可以与各种JavaScript库和框架如jQuery、AngularJS等无缝集成,让Web应用的动态功能更加强大。 开发TekDays.com的过程中,...

    MarketModel:市场模型 Web 应用程序(Java、GroovyGrails、GSP、AJAX、Javascript(Jquery)、HTMLCSS)

    市场模型 Web 应用程序(Java、Groovy / Grails、GSP、AJAX、Javascript (Jquery)、HTML / CSS)。 存储模型 Web 应用程序。 算法 商店有一定数量的收银机。 每个结账处都有一个客户队列,这些客户拥有一定数量的...

    ChamadoFacil:Grails 票务登记系统

    在这个系统中,JavaScript可能被用于处理用户输入验证、实时更新视图以及通过AJAX与服务器进行异步通信,这极大提升了用户体验。例如,用户可能可以无需刷新页面就能提交问题报告或者查看状态更新。 从...

    richui-two:适用于 Grails 2.3.4 的 RichUI Grails 插件版本 > *

    同时,该插件可能还包含了对其他流行库如 jQuery 或 AngularJS 的集成,使得开发者能够利用这些库的强大功能。 总的来说,"richui-two" 是一个针对 Grails 2.3.4 平台设计的前端增强插件,它提供了一系列 ...

    Simulation-e-commerce:[Grails]电子商务模拟站点

    在Grails项目中,可以使用诸如jQuery、React或Vue.js这样的JavaScript库或框架来提升用户体验。 在这个项目中,可能包含以下JavaScript相关技术: 1. **AJAX**:用于异步通信,使用户在后台加载数据,提高响应速度...

    memmanager:市民中心健身会员经理

    根据描述,它是在Grails和jQuery框架下构建的,这表明该系统利用了Groovy语言的Grails web开发框架以及JavaScript库jQuery,用于前端交互和动态功能。 **Grails框架** Grails是一个基于Groovy语言的开源Web应用框架...

    dm844-sample-project:DM844 课程的示例项目

    1. **动态更新**:通过AJAX(Asynchronous JavaScript and XML)技术,JavaScript可以实现页面的无刷新更新,提高用户体验。 2. **表单验证**:前端JavaScript验证可以及时反馈用户输入错误,减少服务器负载。 3. ...

    GrailsWebsite

    1. **jQuery**:作为最流行的JavaScript库,jQuery简化了DOM操作、事件处理和动画效果,常用于Grails应用的前端开发。 2. **React或Vue**:如果项目中使用了现代前端框架如React或Vue,那么JavaScript代码将负责...

    GrailsFrontEnd

    4. **JavaScript库和框架**:虽然具体包含哪些JavaScript库未在描述中明确,但通常Grails项目会集成jQuery、React、Angular或Vue等流行JavaScript框架,用于构建复杂的前端应用。 5. **Grails与JavaScript的集成**...

    Minutrade-Test

    4. **jQuery**:一种广泛使用的JavaScript库,简化DOM操作、事件处理、动画和Ajax交互。 5. **ES6+特性**:包括箭头函数、模板字符串、Promise、async/await等,提高了代码的可读性和可维护性。 6. **React**或Vue....

    GrailsMyFirstWebsite

    JavaScript是该项目的一个标签,表明网站可能使用了JavaScript来增强用户体验,例如通过AJAX实现异步数据更新,或者使用库如jQuery来处理DOM操作和事件绑定。JavaScript也可能被用来验证用户输入,提供动态效果,...

Global site tag (gtag.js) - Google Analytics