Grails中使用Ajax
grails中很好的集成了Ajax,这里介绍利用Jquery的 getJSON方法进行Ajax异步传输。
使用步骤:
- 引入Jquery(.gsp 页面中引入 jquery.js)
<script type="text/javascript" src="${resource(dir: 'assets/js', file: 'jquery.js')}"></script>
- Javascript 脚本中添加Ajax调用方法
function isProductionNameExist(o) { var productName = "test"; var mode = "test"; $.getJSON("isProductionNameExist", // action in controller {productName: productName, // params pass to action, you can use 'null' when no params mode: mode}, function (data) { // call-back function when ajax call complete alert(data.isExist); }); } }
- Controller中action
def isProductionNameExist(){ def productName = params.productName
def mode = params.mode def status = "Y" def ret = [isExist: status] render ret as JSON }
- 触发Js函数
<g:textField name="name" onblur="isProductionNameExist(this)"/>
可能存在的问题:
1. 无法触发controller中action
params中的id参数会影响, 如下,id属性
<g:textField id="${xxxInstance.attr}" name="name" onblur="isProductionNameExist(this)"/>
另grails自动生成的增删查改页面跳转时会隐式传id,也会导致ajax无法触发action
2. 乱码
controller/action中拿到ajax传过去的数据都是乱码,由不同浏览器对于ajax请求不同的处理方式造成。例如:在Ajax调用中,IE总是采用客户端操作系统默认编码,如GB2312,而Firefox总是采用utf-8编码。
为了避免浏览器对数据进行编码,在数据传送前先用函数对数据进行编码,server拿到数据后再解码。
例子:
$.getJSON("isProductionNameExist", {productName: encodeURIComponent(productName)}, function (data) { }); def isProductionNameExist(){ def productName = params.productName.decodeURL() def status = "Y" def ret = [isExist: status] render ret as JSON }