首页
学习
活动
专区
工具
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 请求中,可能会出现一些错误,例如网络错误、服务器错误等。因此,在处理请求失败的情况时,需要进行适当的错误处理,例如显示错误信息、重试请求等。

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

相关·内容

ecshop中ajax的调用原理

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

6.7K50
  • 在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程序中的函数

    5.1K30

    在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.9K40

    在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调用了Python中的os库,执行了一个查看路径和当前路径下文件的功能,我们发现这个C++文件和需要引入的pysplit.py其实是在同一个路径下的

    4.1K30

    AWR报告中超越100%的调用时间

    在最近微信群中的一个讨论中,有朋友提出一个AWR报告中的问题,CPU Time的调用时间比例超过了100%,达到105%。...很多DBA在 9i 时代积累的经验包括,Top 5中的CPU 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的问题。

    63430

    DNS在远程调用执行中的应用

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

    6K240

    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请求的参数中提供数据库的增、删、改、查等常用操作: 二、ODL中的OVSDB插件 ODL中包括三个OVSDB插件,OVSDB southbound

    4.9K91

    在VSCode中调用Jupyterlab和R

    这个功能强大的工具已经成为了数据分析领域的瑰宝,被广泛应用于各种数据分析、可视化等任务中。而VS Code是一个非常流行的编辑器,而且支持多种编程语言和工具。...将JupyterLab集成到VS Code中,可以让你在一个统一的开发环境中完成代码编辑、调试和运行等操作,避免了频繁切换不同软件带来的不便。...details/122304257安装完成并连接服务器之后,我们需要安装一些拓展程序:Chinese (Simplified),Python和Jupyter插件:VScode登录上服务器之后,我们可以在终端或者左侧目录中创建文件...这时候我们就需要VScode中的一些插件来方便我们写代码。我们直接在左侧的拓展中搜索R,然后安装即可。...但是,VS Code也是一个非常强大的编辑器,通过安装一些插件,可以实现很多功能。在本文中,我们介绍了如何通过安装插件,在VS Code中远程连接服务器,并愉快地开始编写Python和R代码。

    16110

    AJAX中的同步加载与异步加载

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

    3.5K60

    Camera系统 | OpenCamera在camx架构中的调用

    : 通过一个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

    2.1K42

    JavaScript中的链式调用

    描述 链式调用在JavaScript语言中很常见,如jQuery、Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式...允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?....()); // undefined jQuery中的链式调用 jQuery是一个高端而不失奢华的框架,其中有许多非常精彩的方法和逻辑,虽然现在非常流行于类似于Vue、React的MVVM模式的框架,但是...,但是在jQuery中$()的主要目标还是作为选择器用来选择元素,而现在返回的是一个_jQuery.fn对象,显然是达不到要求的,为了能够取得返回的元素,那就在原型上定义一个init方法去获取元素,这里为了省事直接使用了... 但是似乎这样又把链式调用的this给漏掉了,这里就需要利用this的指向了,因为在调用时this总是指向调用他的对象,所以我们在这里将选择的元素挂载到this对象上即可。

    4.1K30
    领券