首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在ajax中调用spinner.gif调用grails中的加载时间

在 Grails 中,使用 AJAX 调用时,可以在加载过程中显示一个 spinner.gif 图片。为了实现这个功能,可以在 GSP 页面中添加一个图片元素,并在 AJAX 请求开始时显示它,请求完成时隐藏它。

首先,在 GSP 页面中添加一个图片元素,如下所示:

代码语言:html
复制
<img id="spinner" src="${resource(dir: 'images', file: 'spinner.gif')}" style="display:none">

这个图片元素的 ID 是 "spinner",它的样式设置为 "display:none",这样它最初是隐藏的。

接下来,在 AJAX 请求开始时显示 spinner,请求完成时隐藏它。可以使用 jQuery 的 AJAX 方法来实现这个功能,如下所示:

代码语言:javascript
复制
$(document).ready(function() {
  $('#myButton').click(function() {
    $('#spinner').show(); // 显示 spinner
    $.ajax({
      url: '/myController/myAction',
      type: 'POST',
      data: {
        // 请求参数
      },
      success: function(data) {
        // 处理请求成功的情况
      },
      error: function(xhr, status, error) {
        // 处理请求失败的情况
      },
      complete: function() {
        $('#spinner').hide(); // 隐藏 spinner
      }
    });
  });
});

在这个例子中,当用户点击 ID 为 "myButton" 的按钮时,会发送一个 AJAX 请求到 "/myController/myAction" 这个 URL。在请求开始时,会显示 ID 为 "spinner" 的图片元素。请求完成后,无论请求成功还是失败,都会隐藏 spinner。

需要注意的是,在 AJAX 请求中,可能会出现一些错误,例如网络错误、服务器错误等。因此,在处理请求失败的情况时,需要进行适当的错误处理,例如显示错误信息、重试请求等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ecshopajax调用原理

1:首先ecshop是如何定义ajax对象。      ecshopajax对象是js/transport.js文件定义。里面是ajax对象文件。...声明了一个var Ajax = Transport;对象和一个方法Ajax.call = Transport.run; 2:ecshopajax可以使用两种方式传递数据.一种是get方式,一种是post...act=return_to_cart', 'order_id=' + orderId, returnToCartResponse, 'POST', 'JSON'); 3:ecshop ajax可以是传递...返回结果result也是对象. 4:ecshop ajax函数里面.第三个参数就是回掉函数名称。...比如以上代码addToCartResponse 这个函数就是ajax处理结果回调函数. 5:ecshopphp代码,一般是通过get或者post方式来接受函数。比如以下例子,如果接受是对象。

6.6K50

Java调用Python

关于Java调用Python程序实现,根据不同用途可以使用多种不同方法,在这里就将在Java调用Python程序方式做一个总结。...通过Runtime调用Python程序与直接执行Python程序效果是一样,可以Python读取传递参数,也可以Java读取到Python执行结果。...通过Jython调用 通过Jython调用Python?我听到这个概念时候一脸懵逼,不是说好Java调用Python程序吗?这个Jython是什么鬼?...使用Jython能做什么 既然Jython是Python语言Java平台实现,是Java语言实现,那么是否可以Jython程序调用Java,Java也能调用Jython呢?...pi1 = new PythonInterpreter(); // 加载python程序 pi1.execfile(pythonFunc); // 调用Python程序函数

5K30

Android调用WebService

某些情况下我们可能需要与Mysql或者Oracle数据库进行数据交互,有些朋友第一反应就是直接在Android中加载驱动然后进行数据增删改查。...我个人比较推荐做法是使用Java或PHP等开发接口或者编写WebService进行数据库增删该查,然后Android调用接口或者WebService进行数据交互。...本文就给大家讲解Android如何调用远程服务器端提供WebService。 既然是调用WebService,我们首先搭建WebService服务器。...地址:http://www.webxml.com.cn/zh_cn/index.aspx 下面演示就是如何通过该网站提供手机号码归属地查询WebService服务查询号码归属地 调用地址http:/...调用WebService还是比较简单:请求webservice,获取服务响应数据,解析后并显示。

1.8K40

Android调用WebService

某些情况下我们可能需要与Mysql或者Oracle数据库进行数据交互,有些朋友第一反应就是直接在Android中加载驱动然后进行数据增删改查。...我个人比较推荐做法是使用Java或PHP等开发接口或者编写WebService进行数据库增删该查,然后Android调用接口或者WebService进行数据交互。...本文就给大家讲解Android如何调用远程服务器端提供WebService。 既然是调用WebService,我们首先搭建WebService服务器。...地址:http://www.webxml.com.cn/zh_cn/index.aspx 下面演示就是如何通过该网站提供手机号码归属地查询WebService服务查询号码归属地 调用地址http:/...调用WebService还是比较简单:请求webservice,获取服务响应数据,解析后并显示。

2.3K50

C++调用Python

但是C++一个缺点是比较难找到很好轮子,这也是很多人专用Python一个重要原因。这篇文章我们要介绍是一个比较特殊场景——用C++代码去调用Python函数实现一些功能。...而另一种工作方式:通过Python来调用一些C++或者Fortran实现高性能函数,可以参考这一篇博客。...VS Code配置 这里我们使用IDE是VS Code,但是上述提到几个路径,VS Code默认是不被包含,因此代码编辑过程include 这一步就会报错了。...调用Python函数string.split() C++如果我们想分割一个字符串,虽然说也是可以实现,但是应该没有比Python执行一个string.split()更加方便快捷方案了,因此我们测试一个用...但是我们同时借助于PyRun_SimpleString调用了Pythonos库,执行了一个查看路径和当前路径下文件功能,我们发现这个C++文件和需要引入pysplit.py其实是同一个路径下

3.9K30

Lua调用C语言

(L,1); lua_pushnumber(L,sin(d)); return 1; } 所有Lua中注册函数都必须使用一个相同原型,该原型就是定义lua.hlua_CFunction:...因此,该函数压入结果前无须清空栈。该函数返回后,Lua会自动保存返回值并清空整个栈。 Lua调用这个函数前,还必须通过lua_pushcfunction注册该函数。...最后,该函数关闭目录并返回1,C语言中即表示该函数将其栈顶值返回给了Lua。 某些情况,l_dir这种实现可能会造成内存泄露。该函数调用三个Lua函数均可能由于内存不足而失败。...因此,如果我们保护模式调用下试图yield时,解释器就会抛出异常。Lua5.3使用基本类似于下面示例方式实现了pcall。...完成了这些步骤后,就可以使用requireLua中直接加载这个模块了: local mylib = requrire "mylib" 上述语句会将动态库mylib链接到Lua,查找函数luaopen_mylib

3.7K20

AWR报告超越100%调用时间

最近微信群一个讨论,有朋友提出一个AWR报告问题,CPU Time调用时间比例超过了100%,达到105%。...很多DBA 9i 时代积累经验包括,Top 5CPU Time来自于“CPU used by this session”,然而在Oracle 10g开始,这个信息发生了改变,由于Time Model...引入,CPU Time信息来自于v$sys_time_model及其累积而来DB CPU信息,两者从此开始分别计算。...因为分离进而引起了底层差异,MOS文档 1911984.1 中提到: CPU time 使用 getrusage() 函数来记录时间,而 DB Time 使用 gettimeofday() 函数和系统时钟交互...;后者更加精确,而前者时间记录可能会偏大,超过DB Time,就会出现CPU Time超过DB Time问题。

58930

DNS远程调用执行应用

纯属蹭log4j2热度文,和安全没有直接关系,本文只谈DNS以及日志应用; 通过dnslog.cn截图,分析dnslog.cn原理,基于此,介绍了可以获取更多信息ceye功能;应用场景上...Address一般是服务器本身配置DNS外网出口IP,证明是下部分命令成功icloud.com登录功能所在服务器成功执行,这个是一个可以执行命令演示,如果这里exp是一个echo "...自己设备上执行,可以看到我设备本身DNS外网递归出口为27.40.22.150IP地址; image.png image.png 二、实现原理 image.png     当我们...权威服务器就能知道,什么时间,什么IP请求了什么域名,然后做日志回显即可完成该操作;(该网站提供子域名TTL也是 190,所以190s之内请求就记录不了了,要等到下一个TTL周期进行请求。)...http请求时间,服务器端就可以拿到信息,有利于快速定位用户访问异常并进行针对性解决。

5.9K240

OVSDB介绍及OpenDaylight调用

前言 OVS是一种开源软件交换机,可安装于通用虚拟服务器环境虚拟环境单个、多个物理机上不同虚拟主机都需要通过OVS实现数据交换。...目前Opendaylight控制器也有一个单独子项目实现此管理协议,即OVSDB(比如ovsdb-release-lithium-sr3)。...记录网桥、端口、QOS等网络配置信息是以JSON格式(schema)保存,通常schema/usr/share/openvswitch/vswitch.ovsschema。...1.1 OVSDB管理协议 OVSDB管理协议(OVSDB management protocol)是VMware公司提出负责管理OVS数据库协议,OVSDB管理协议定义了一套RPC接口,用户可通过远程调用方式管理...其中transact是OVSDB管理协议中比较重要操作方法,它是RPC请求参数中提供数据库增、删、改、查等常用操作: 二、ODLOVSDB插件 ODL包括三个OVSDB插件,OVSDB southbound

4.3K91

Go语言模版调用函数

一.调用方法 模版调用函数时,如果是无参函数直接调用函数名即可,没有函数括号 例如在go源码时间变量.Year()模版{{时间.Year}} 模版调用有参函数时参数和函数名称之间有空格...--调用time变量无参方法--> 取出时间年:{{.Year}} 取出时间年:{{.Month}} <!...html/template包下FuncMap进行映射 FuncMap本质就是map别名type FuncMap map[string]interface{} 函数被添加映射后,只能通过函数FuncMap...key调用函数 go文件代码示例 package main import ( "net/http" "html/template" "time" ) //把传递过来字符串时间添加一分钟后返回字符串格式时间... 调用自定义函数,格式化后时间:{{mf .}}

2.8K30

AJAX同步加载与异步加载

HTML5学堂:AJAX知识当中,有几个经典辨析,“同步加载”与“异步加载区别;post与get区别;XML与JSON区别等。...本文讲解就是同步与异步区别,可以通过图片更直观理解两者加载内容时流程。最后介绍了异步加载优势。...什么是AJAX AJAX是四个单词简写,其中Asynchronous即异步意思,异步链接可以同时发起多个,并且不会阻止JS代码执行。...与之对应概念是同步,同步链接在同一时刻只会有一个,并且会阻止后续JS代码执行,JS必须等待同步链接加载完毕后才能继续执行。AJAX发展到现在,不但可以发起异步链接,也可以发起同步链接。...异步加载优于同步加载特点 1.浏览器可以从服务器同时请求多项内容; 2.浏览器请求返回速度会快得多; 3.只有页面真正改变部分得到更新; 4.能够减少服务器数据流量; 5.用户可以页面更新同时继续工作

3.3K60

Camera系统 | OpenCameracamx架构调用

: 通过一个JumpTableHAL3类型对象pHAL3来分发(dispatch)或者说跳转到实际实现 g_jumpTableHAL3描述跳转关系 \vendor\qcom\proprietary...\camx\src\core\hal\camxhal3.cpp 于是到了真正调用函数, 开头没什么好说,看上去就是assert一些必要信息是否完整 接下来看,注释还是写得比较清楚 568...: 深入理解Android相机体系结构之六_xiaozi63博客-CSDN博客_深入理解android相机体系结构 “HAL3Module构造方法中会去通过dlopen方法加载com.qti.chi.override.so...m_ChiAppCallbacks来调用CHI函数了 回到ProcessCameraOpen函数,这句调用终于理顺了 \vendor\qcom\proprietary\camx\src\core...对象是一个单例 ExtendOpen调用位置: \vendor\qcom\proprietary\chi-cdk\core\chiframework\chxextensionmodule.cpp

1.6K42
领券