Grails Ajax 实现 联动选择

carpenterworm 2009-04-03

如果在jsp中添加<g:javascriptlibrary="prototype"/>再使用g:remoteLink，g:formRemote等可实现异步刷新。

查看生成的html会发现主要实现代码如下

new Ajax.Updater('Bdiv','/Test/test/b', {asynchronous:true,evalScripts:true});return false;

有了这段语句，可以在JavaScript脚本中方便实现异步刷新，而不会仅仅限制在grails提供的几个Tag。

如，欲实现简单的无刷新关联select

a.gsp

<html>
<head>
<title>test</title>
<g:javascript library="prototype" />
<script language="JavaScript">
function sel(){
    var select = document.getElementById("A");
    var index = select.selectedIndex;
    var a = select.options[index].value;
    new Ajax.Updater('Bdiv','/Test/test/b?Aid='+a,
        {asynchronous:true,evalScripts:true});return false;
    }
}
</script>
<body>
<select id="A" onChange="sel();">
<option vaule="1">1</option>
<option vaule="2">2</option>
<option vaule="3">3</option>
</select>
<div id="Bdiv">
</div>
</body>
</html>

b.gsp

<select id="B">
<g:each in="${BB}" var="bInstance">
  <option value="${bInstance.id}">${bInstance.name}</option>
</g:each>
</select>

TestController.groovy

class TestController{
    def index = { redirect(action:a,params:params) }
    def a={[params:params]}
    def b={
        render(action:"b",model:[BB:B.findAllByA(params.Aid)])
    }
}

B.groovy

class B{
String name
Integer A
}

这样，动了A之后，B会根据A的内容从数据库查询出A值为Aid的所有B，然后列在B选框中。

g:select标签是多选框，单选框标签没有找到，就这样实现了。

联动选择有JavaScript能很简单实现，这儿只是一个Ajax.Updater的一个用法。

初学者，有错误的地方望大家不吝赐教。谢谢！

carpenterworm

carpenterworm

相关推荐

ajax请求添加自定义header参数代码

我就废话不多说了，大家还是直接看代码吧~并且不会因为增加自定义请求头header，而引起预检查请求;Access-Control-Allow-Headers 表示能接受的http头部，别忘了加入你自己发明创造的头部。如果是OPTION返回空，设置返回码为2

kentrl / 0评论 2020-11-10

springmvc 结合ajax批量新增的实现方法

结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo

ajaxyan / 0评论 2020-11-09

ajax异步实现文件分片上传实例代码

使用Ajax上传文件的应用场景颇多，比如上传用户头像、博客文章中插入图片、对认证用户相关身份进行校验等等很多很多。这篇文章主要介绍了关于ajax异步实现文件分片上传的相关内容，下面话不多说了，来一起看看详细的介绍吧。-- 信息存放地 --> <

zndy0 / 0评论 2020-11-03

Ajax实现登录案例

// String jsonStr = "{\"flag\":false,\"info\":\"用户名已经注册\"}";

baiwen / 0评论 2020-09-21

Ajax获取node服务器数据的完整步骤

因为是要将服务器获取的数据放在网页中 所以说对页面的渲染是必要的 这里我准备的是 art-template模板。const list = ["百度", "百度官网", "百度游戏", "

学留痕 / 0评论 2020-09-20

异步编程｜五分钟让你学会局部刷新Ajax技术

Ajax是Asynchronous JavaScript and XML的缩写，是JavaScript、XML、CSS、DOM等多个技术的组合。Ajax的工作原理是一个页面的指定位置可以加载另一个页面所有的输出内容，这样就实现了一个静态页面也能获取到数据

Richardxx / 0评论 2020-11-09

使用AJAX实现UTF8编码表单提交到GBK编码脚本无乱码的解决方法

<li><a href="utf8Form.html" rel="external nofollow" rel="external nofollow" rel="ext

learningever / 0评论 2020-09-19

ajax实现excel报表导出

项目中遇到一个场景，要导出一个excel报表。由于需要token验证，所以不能用a标签；由于页面复杂，所以不能使用表单提交。初步考虑前端使用ajax，后端返回流，定义指定的header。alert('导出失败，导出的内容为空！excel能正常导出，但下载下

chongxiaocheng / 0评论 2020-08-16

ajax实现简单登录页面

Ajax是一种无需重新加载整个网页，能够更新部分网页的技术。Ajax工作原理是一个页面的指定位置可以加载另一个页面所有的输出内容，这样就实现了一个静态页面也能获取到数据库中的返回数据信息了。所以Ajax实现了一个静态网页在不刷新整个页面的情况下与服务器通信

ajaxhe / 0评论 2020-08-16

浅谈AjaxPro.dll,asp.net 前台js调用后台方法

Ajax是异步Javascript和XML的英文缩写。"Ajax"这个名词的发明人是Jesse James Garrett,而大力推广并且使Ajax技术炙手可热的是Google。Ajax的核心理念在于使用XMLHttpRequest对象

lyqdanang / 0评论 2020-08-16

ajax缓存机制

只要是POST请求，浏览器都不会缓存。Https的请求，浏览器不会缓存。在URL中拼入随机的查询字符串可以使浏览器认为这是一个新的请求，从而不使用缓存。

curiousL / 0评论 2020-08-03

jQuery Ajax 操作函数汇总

jQuery 库拥有完整的 Ajax 兼容套件。执行异步 HTTP 请求。当 Ajax 请求完成时注册要调用的处理程序。在 Ajax 请求发送之前显示一条消息。使用 HTTP POST 请求从服务器加载数据。

TONIYH / 0评论 2020-07-22

Django学习日记-08回顾--温故知新

　　　　　　-Ajax全部操作在一个html页面执行，对于之前的Ajax操作中事件的发生于其对于的联系方式相关，思路上首先都在思考编写模板内容部分，然后在是函数的执行　。　　　-　使用 id = ‘事件名’ 与其对应的是 <script> $.

时光如瑾雨微凉 / 0评论 2020-07-19

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

public static string GetValueAjax//这个方法需要是静态的方法要用到关键字static. json=" + username,//ajaxtest.ashx为目标文件

83510998 / 0评论 2020-07-18

JavaScript-Runoob-AJAX：ASP/PHP 实例

AJAX 用于创造动态性更强的应用程序。下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信： 请在下面的输入框中键入字母：。当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。该函数

坚持着执着 / 0评论 2020-07-16

【Ajax】XMLHttpRequest().readyState的五个状态（0,1,2,3,4）

//第1步：创建异步请求对象xhrvar xhr = new XMLHttpRequest();}//这个步骤就像一个阴魂一样，在每一步骤执行完后，都会执行。只是每次的xhr.readyState的数值不同。当 xhr.readyState==0 时，是表

jiaguoquan00 / 0评论 2020-07-07

jQuery ajax - ajax() 方法中的一些属性

jQuery ajax - ajax() 方法中的一些属性

Web全栈笔记 / 0评论 2020-07-06

为什么Ajax XMLHttpRequest POST方法传递参数失败了

var paras = ‘firstname=zhang&lastname=san‘;//Get 方式，直接将参数放到URL链接中xhr.open;xhr.send;当然，POST传递参数，有四种方式，有兴趣的同学，可以再研究一下。

李永毅 / 0评论 2020-07-05

重学Ajax

只是一种js的应用，在无需重新加载整个网页的情况下实现部分网页的数据更新的技术。减少和后台的交互，实现局部、异步更新。客户端的请求发送之后等待服务器处理，处理之后相应，在处理成功之后载入页面，但是，当页面中的内容有问题时还是需要重新编写，重复上一个过程。客

坚持着执着 / 0评论 2020-07-05

有关post的三种提交格式

request.body：其中有json格式的编码数据，但是是bytes类型，需要用json模块反序列化一下，变成字典，才能用。并不是前两种方法不在会在request.body中，而是request.POST只接受前两种，第三种json格式必须去请求体里面

wcqwcq / 0评论 2020-07-04

状态机模式 与 ajax 的结合运用

太神奇了，昨晚做了个梦，梦中我悟出一个道理：凡是涉及到异步操作而且需要返回值的函数，一定要封装成 Promise 的形式，假如返回值取决于多个异步操作的结果，那么需要对每个异步操作进行状态的设计，而且需要封装一个 next 函数。??????，到了晚上才觉

Chaunceywu / 0评论 2020-06-27

Jquery属性和元素操作，ajax

after() 在备选元素之后插入内容，同步即指一件事干完之后再干下一件事，这是在设计ajax时基于安全的考虑，其实就相当于从页面上发送http请求，先通过js代码加密，然后通过ajax发送请求。dataType:‘json‘, // 期望后台返回的数

wcqwcq / 0评论 2020-06-26

ajax将数据遍历给select的option选项

<select name="type" id="typeId"> <option>请选择</option> </select>js：

李永毅 / 0评论 2020-06-21

【AJAX】Asynchronous JavaScript And XML （非同步的JS &amp; XML）

AJAX 即“Asynchronous Javascript And XML”。是指一种创建交互式网页应用的网页开发技术。ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。网页不刷新的情况下，从服务器中获取数据的解决方案。-　url ，你

坚持着执着 / 0评论 2020-06-16

Jquery中的Ajax

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。至于技术

delmarks / 0评论 2020-06-14

Ajax(2) —— Ajax接收JSON数据

JSON是一种存储和交换文本信息的语法。因为JSON比XML更轻量，效率更高，更易解析，所以在Ajax中前后台传输数据一般都使用的是JSON格式。JSON最常见的用法之一，是从web服务器上读取JSON格式的字符串数据，将JSON数据转化为JavaScri

wcqwcq / 0评论 2020-06-14

Ajax(1) —— Ajax基础

Ajax即Asynchronous JavaScript and XML，是异步的JavaScript与XML。Ajax提供了基于服务器交换数据并实现局部更新网页的技术，在不重新加载整个网页的情况下，可以接受来自服务器请求到的数据，提高了浏览页面的效率和用

坚持着执着 / 0评论 2020-06-14

Jquery ajax书写方法代码实例解析

Ajax在前端的应用极其广泛，因此，我们有必要对其进行总结，以方便后期的使用。　　可以异步请求服务器的数据，实现页面数据的实时动态加载， 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。jquery在全局对象jquery绑定了ajax

ppsurcao / 0评论 2020-06-14

基于ajax及jQurey实现局部刷新过程解析

jsObject=new JSONObject; //以键值对方式存储。success:function{　　　　　　　//ajax收到回传的数据是会触发的事件success. $[0].innerHTML=first;　　　　//该形式使用了jQuery

wujiajax / 0评论 2020-06-14

php + ajax 实现的写入数据库操作简单示例

本文实例讲述了php+ ajax 实现的写入数据库操作。分享给大家供大家参考，具体如下：。<input class="tel" type="text" placeholder="请输入您的手机号码&q

carpenterworm / 0评论 2020-06-13

JavaScript-函数式编程

在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。我们会讲到如何写出这个 curry 函数，并且会将这个 curry 函数写的很强大，但是在编写之前，我们需要知道柯里化到底有什么用？

84423067 / 0评论 2020-06-12

原生Ajax手动提交form表,将input标签的name:value值转换为字符串

我在使用form进行传递数据的时候,发现不知道如何调用回调函数,这个时候使用了原生的Ajax,但是使用xhr.open进行get请求的时候,需要带上form标签中input的数据.这里需要将input中的name:value转换为字符串的形式进行显式提交。

TONIYH / 0评论 2020-06-11

ajax 中参数带有html格式 文本编辑器提交form表单时异常

//直接传html时会出现异常，需先进行格式处理 $.val; $.val; $.val;//html处理 function HTMLEncode { text = text.replace;

ajaxtony / 0评论 2020-06-11

Web的26项基本概念和技术

　Web开发是比较费神的，需要掌握很多很多的东西，特别是从事前端开发的朋友，需要通十行才行。今天，本文向初学者介绍一些Web开发中的基本概念和用到的技术，从A到Z总共26项，每项对应一个概念或者技术。　　AJAX 全称为“Asynchronous Java

Richardxx / 0评论 2020-06-10

jq放弃ajax请求

var request;if(request != null). request.abort();});

mmywcoco / 0评论 2020-06-10

highcharts与ajax的应用

公司近日有个需求，报表的数据以图表的形式展现出来。找了很多相关的资料，最后决定用highcharts图表。对个人用户完全免费；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼状图、散布图；

春雨的雕刻时光 / 0评论 2020-06-10

vue中ajax请求放在哪个生命周期中

为什么不在 created 里去发ajax？created 可是比 mounted 更早调用啊，更早调用意味着更早返回结果，那样性能不是更高？首先，一个组件的 created 比 mounted 也早调用不了几微秒，性能没啥提高；而且，等到异步渲染开启的时

坚持着执着 / 0评论 2020-06-10

前后端传输数据的编码格式(contentType)

django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中。如果你把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中而将文件解析到request.FILES中。conte

TONIYH / 0评论 2020-06-08

ajax

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。data:{‘i1‘:$.val(),‘i2‘:$.val()},confirmButtonText: "是的，老子就要删!cancelButtonTex

ChinaGuanq / 0评论 2020-06-08

JQuery使用Ajax调用后台方法

data: "{‘str‘:‘aaa‘,‘str2‘:‘bbb‘}",

春雨的雕刻时光 / 0评论 2020-06-08

jQuery中的Ajax

data: { name: ‘zhangsan‘, age: ‘20‘ },如果想要传递json格式的属性，需要将contentType设置为application/json，并且在data属性中传递一个json字符串。beforesend方法允许我们在请

tthappyer / 0评论 2020-06-07

@Ajax.ActionLink跳转页面的问题解决方案 MVC Ajax不支持问题

在客户端执行服务器返回的JavaScript代码当一个内置的Ajax辅助方法请求一个操作方法，该方法会返回一个在客户端执行立即的脚本。貌似使用Ajax.ActionLink跳转了页面，而不是刷新当前视图。最后通过分析发现视图代码、脚本引用均未出现问题。而是

坚持着执着 / 0评论 2020-06-07

同源政策

Ajax只能向自己的服务器发送请求。比如现在有一个A网站、 有一个B网站， A网站中的HTML文件只能向A网站服务器中发送Ajax请求，B网站中的HTML文件只能向B网站中发送Ajax请求，但是A网站是不能向B网站发送Ajax请求的，同理，B网站也不能向A

Chydar / 0评论 2020-06-07

Ajax，get

<!

mmywcoco / 0评论 2020-06-06

什么！你想要封装好的ajax

convertResult+= c + "=" + data[c] + "&";几点说明： IE7及其以上版本中支持原生的 XHR 对象，因此可以直接用： var oAjax = new XMLHttpReq

风萧萧梦潇 / 0评论 2020-06-06

Ajax六

相信很多有一定前端经验的同学肯定听说过 jQuery，并且稍有研究的人肯定也知道 jQuery 提供了 Ajax 系列的工具方法。事实上，市面上有各种各样的 Ajax 类库可以供我们使用，它们更加健壮、更加成熟、并且设计也更为合理。那么，本章节挑选了曾经盛

88570299 / 0评论 2020-06-05

Ajax二

在上一节我们已经粗略的讲过了 XMLHttpRequest 是 Ajax 的核心技术。是的，可以说，没有 XMLHttpRequest 这样的技术存在，Ajax 就是不完整的，甚至可以说就不会有 Ajax 这样的技术存在。XMLHttpRequest 实质

坚持着执着 / 0评论 2020-06-05

原生js实现ajax封装

表单验证是否登录成功、百度搜索下拉框提示和快递单号查询等等。Ajax请求数据流程，其中最核心的依赖是浏览器提供的对象xhr，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面。

TONIYH / 0评论 2020-06-05

layui框架跨域请求携带Cookie

页面中如果用ajax发起请求，默认跨域请求不携带cookie,如果需要ajax发起跨域请求并携带cookie需设置xhrFields为true。从后台和页面两处设置，即可完成跨域请求携带cookie的问题。但layui框架的表格渲染分页虽然支持跨域请求，但

李永毅 / 0评论 2020-06-04

Django Ajax

AJAX翻译成中文就是“异步的Javascript和XML”。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。data:{‘i1‘:$.val(),‘i2

水痕 / 0评论 2020-06-03