`
dcj3sjt126com
  • 浏览: 1876872 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery发送ajax请求时loading功能的实现

阅读更多

 

ajax的loading功能实现原理是发送请求之前显示loading信息,接收了服务端返回的信息时候将loading信息清掉。
jquery的ajax有一个beforeSend属性,可以给它一个方法显示loading信息:
$.ajax({
   url:'demo.do',
   type: "POST",
   data: ({name:'wang',location:'AJAX'}),
   beforeSend:function(){$("#messageZone").text("loading......");}, //添加loading信息
   success:function(){$("#messageZone").text("");}    //清掉loading信息
});

如果使用jquery.form.js,则有一个beforeSubmit属性,和$.ajax里面的beforeSend作用一样:
   $("#myForm").ajaxSubmit({ 
     dataType:null,
     ",
     method:'post',
     beforeSubmit:function(){$("#messageZone").text("loading......");}, //添加loading信息
     error: function() { 
        $("#messageZone").text(""); //清掉loading信息
      alert("请求出错,请重试"); 
      },       
     success: function(data) { 
       $("#messageZone").text("");     //清掉loading信息
     alert("请求成功,返回"+data); 
     }
    });

分享到:
评论

相关推荐

    为jquery的ajax请求添加超时timeout时间的操作方法

    当客户端向服务器发送Ajax请求时,如果服务器没有在合理的时间内响应,就会造成用户界面的卡顿,甚至导致用户的不良体验。 首先,我们来了解下jQuery中Ajax请求的超时timeout属性。在Ajax请求中设置timeout属性可以...

    jquery ajax实例点击按钮触发Ajax loading

    在本实例中,我们将探讨如何利用jQuery的AJAX功能,通过点击按钮来触发一个加载动画(通常表现为一个"loading"图标或指示器),以提升用户体验,表明后台数据正在处理中。 首先,确保在项目中引入了jQuery库。你...

    jquery遮罩,ajax时调用

    "jquery遮罩,ajax时调用"这一主题,就是关于如何在Ajax请求执行期间显示一个遮罩层,以阻止用户与页面其他部分的互动。 首先,我们来看一下遮罩层的基本概念。遮罩层是一种在页面上覆盖一层半透明或者特定颜色的...

    ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件

    4. **AJAX请求**:在触发函数中,使用jQuery的`.ajax()`方法向服务器发送请求,获取更多数据。参数包括URL、请求类型(GET或POST)、数据(如果需要的话)以及回调函数。 5. **服务器端处理**:在ASP.NET的后端,...

    jquery实现的ajax选项卡tab特效插件代码

    总结,使用jQuery实现Ajax选项卡特效插件,需要理解jQuery的DOM操作、事件处理和Ajax请求。通过编写自定义插件,我们可以封装这些功能,方便地应用到多个页面。在实际开发中,还可以根据项目需求进行个性化定制,如...

    AjaxLoading

    而jQuery提供了更简洁的API,如`$.ajaxStart()`和`$.ajaxStop()`,它们可以在Ajax请求开始和结束时触发回调函数,从而控制加载动画的显示。 ```javascript $(document).ajaxStart(function() { $('.loading-icon')...

    ajax的jquery代码

    在这个“ajax的jquery代码”主题中,我们将深入探讨如何使用jQuery实现Ajax功能。 一、jQuery中的Ajax基础 1. `$.ajax()`: 这是jQuery中最基础的Ajax函数,它可以接受一个包含各种选项的对象作为参数,如URL、类型...

    jQuery:ajax

    jQuery的Ajax功能强大且易于使用,无论是通过局部事件还是全局事件,都可以实现对Ajax请求的精细控制。掌握jQuery的Ajax技术,能够帮助前端开发者创建出更加流畅、响应式的Web应用程序。在实际项目中,合理运用这些...

    jquery+ajax+php无刷新分页

    - 可以添加错误处理机制,当Ajax请求失败时显示错误信息。 - 考虑添加loading动画,提高用户体验。 - 使用URL哈希(如`#page=2`)来保持页面状态,使用户能够直接跳转到特定页码。 以上就是使用jQuery、Ajax和...

    Javascript ajax加载Loading

    2. **JavaScript函数**:编写一个函数,用于发送AJAX请求,并在请求开始和结束时控制加载指示器的显示。 ```javascript function fetchData(url) { const loadingGif = document.getElementById('loading-gif');...

    基于Jquery的Ajax的Java交互

    在IT行业中,JavaScript库JQuery极大地简化了前端与后端的交互,特别是在处理异步数据交换时,Ajax(Asynchronous JavaScript and XML)技术扮演着关键角色。本篇将深入探讨基于Jquery的Ajax如何与Java后台进行交互...

    jQuery和ajax实现树状结构

    创建一个Ajax请求,向服务器发送请求获取JSON数据,然后使用jQuery处理返回的数据,将其插入到HTML结构中。 ```javascript function loadTreeData() { $.ajax({ url: 'api/getTreeData', type: 'GET', ...

    jquery异步请求例子

    jQuery的$.ajax()函数是实现这一功能的主要工具。它支持GET、POST等多种HTTP请求方法,可以处理JSON、XML、HTML等多种数据格式。 首先,我们来看一下jQuery中的AJAX基本语法: ```javascript $.ajax({ url: '...

    用jquery实现ajax上传文件.net版.zip

    在IT行业中,无刷新上传文件是一...前端通过jQuery的AJAX功能发送文件,后端由ASP.NET接收并处理文件。整个过程无须刷新页面,提高了用户体验。开发者可以参考这个例子学习如何在自己的项目中实现类似的文件上传功能。

    用jquery实现ajax上传文件php版.zip

    这个功能基于AJAX技术,可以提高用户体验,因为用户在上传文件时无需等待页面刷新,可以继续浏览其他内容。 首先,`ajaxfileupload.css`是样式表文件,用于定义上传界面的样式,包括按钮、进度条等元素的外观。它...

    前端项目-jquery-loading-overlay.zip

    4. **事件绑定**:可以轻松地与Ajax请求或其他事件(如点击、滚动等)绑定,实现自动显示和隐藏加载指示器。 5. **API控制**:提供丰富的API接口,方便开发者在代码中随时调用,动态控制加载状态。 在实际应用中,...

    jquery+ajax分页(新)

    3. **AJAX请求**:`loadPage`函数负责发送AJAX请求,获取指定页的数据: ```javascript function loadPage(pageNum) { $.ajax({ url: '/api/data?page=' + pageNum, type: 'GET', success: function(response) ...

    AJAX的等待图标(LOADING图标)

    在实际应用中,开发者可以利用JavaScript库,如jQuery,来轻松实现AJAX请求及LOADING图标的显示和隐藏。例如,使用jQuery的`$.ajaxStart()`和`$.ajaxStop()`方法,可以在AJAX请求开始和结束时自动控制图标的状态。 ...

    Jquery Ajax 存储过程分页

    1. **GetAjaxPage.ashx**:这是ASP.NET的HTTP Handler,负责接收前端发送的AJAX请求,调用C#存储过程获取分页数据,并将其返回给前端。 2. **web.config**:配置文件,可能包含数据库连接字符串和其他ASP.NET配置...

Global site tag (gtag.js) - Google Analytics