jquery-ajax请求：超时设置，增加 loading 提升体验

$.ajax()——超时设置，增加 loading 提升体验

前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的重点. 常见的做法是: 1.设置超时时间,一旦时间超过设定值,便终止请求: 2.页面内容加载之前,手动增加一个 loading 层. 代码如下: getAjax: function (method, apiUrl, options, callback) { var xhr = $.ajax({ ty…

jquery-ajax请求：超时设置，增加 loading 提升体验

前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的重点. 常见的做法是: 1.设置超时时间,一旦时间超过设定值,便终止请求:2.页面内容加载之前,手动增加一个 loading 层. 代码如下: getAjax: function (method, apiUrl, options, callback) { var xhr = $.ajax({ typ…

jquery ajax请求方式与提示用户正在处理请稍等，等待数据返回时loading的显示

1.jquery ajax请求方式与提示用户正在处理请稍等为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实现初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面.异步和同步:同步意味着执行完一段程序才能执行下一段,它属于阻塞模式,其表现在网页上的现象是——浏览器会锁定页面(即所谓的页面假死状态),用户不能操作其它的,必…

jquery Ajax请求中显示Loading...

jquery Ajax请求中显示Loading... $('#btnTest').click(function(){ $.ajax({ url ---- ,根据你需要设置url路径 type:'post', data:'name=Test', timeout:15000, beforeSend:function(XMLHttpRequest){ //alert…

jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“application/json”, (3)data传递的数据必须是严格的json数据,如"{'a':'aa','b':'bb'}",而且参数必须和静态方法的参数一一对应 (4)aspx的后台方法返回的数据默认形式是“{'d':'返回的内容'}”,所以如果dataType指定为"…

原生js，jquery ajax请求以及jsonp的调用

ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 …

二、jQuery Ajax请求

一.Ajax请求 1.jQuery Ajax请求 let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/apiPackage/knowKeyWord", type: "GET", dataType: "json", data: { "knowcontent": this.state.title + this.state.description,…

jquery Ajax请求示例，jquery Ajax基本请求方法示例

jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https://www.cnblogs.com/fanshuyao/ $.ajax({ //async: false,//设置为同步,默认为异步(一般不需要) url : "xxx/xxx.html", type : "post", //dataType : "json&…

Ajax请求如何设置csrf_token

1. 方式一通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送. $.ajax({ url: "/cookie_ajax/", type: "POST", data: { "username": "yang", "password": 123, // 使用jQuery取出csrfmiddlewaretoken的值,拼接到data总 "csrfmiddl…

jQuery ajax 请求php遍历json数组到table中

html代码(test.html),js在html底部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test-jquery-ajax-list</title> </head> <body> <div class="main"> <table…

jQuery ajax请求错误返回status 0和错误error的问题

上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type: "POST", beforeSend: function(xhr){xhr.setRequestHeader('__RequestVerificationAntiCSRFToken', $("#hidden-CSRFToken").val());}, url: $(…

jquery ajax 请求参数详细说明及实例

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项…

JQuery ajax请求struts action实现异步刷新的小实例

这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换,第二种是采用goole的gson-2.1.jar来转换,大家可以根据需要导入相应的jar包,在这里为了做测试将两种jar包都导入了.下面开始进入正题第一步:导入相关jar包,本样例需导入struts相关jar包,json-lib.jar,gson-2.1.jar可以任意选择,但是这里需要都导入,因…

统一处理jquery ajax请求过程中的异常错误信息的机制

当jQuery ajax向服务器发送请求,服务器发生异常,比如:400.403.404.500等异常,服务器将异常响应给客户端,此时的ajax可以获取异常信息并进行处理,但此时我们一般是跳转到与异常编码对应的异常页面,对异常集中展现与处理. 首先,发送ajax请求: $.ajax({ type: ‘POST’, url: url, data: data, success: success, dataType: dataType }); 然后,服务发生异常,将对应的异常编码响应给客户端: resp…

JQuery AJAX请求aspx后台方法

利用JQuery封装好的AJAX来请求aspx的后台方法,还是比较方便的,但是要注意以下几点: 1.首先要在方法的顶部加上[WenMethod]的特性(此特性要引入using System.Web.Services;命名空间) 2.其次方法一定要是静态(static)方法. 下面我做了几个不同的调用后台方法的例子: 1.不带参数返回string方法前台代码: //不带参数返回string方法 $.ajax({ type: "post", url: "后台返回json数组.a…

jquery ajax请求成功，数据返回成功，seccess不执行的问题

1.状态码返回200--表明服务器正常响应了客户端的请求: 2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据. 但是,程序就是不进入到回调函数success: function(data){****}而是进入到error: function(data){***} 记得上次是因为存在跨域访问的问题导致.这次查看不存在跨域的问题.此时就很是不解. 事情的来源是这样的: 后台的配…

js 中ajax请求时设置 http请求头中的x-requestd-with= ajax

今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法判断接受的http请求是否是 ajax请求了. 怎么办呢,显然就是给http 请求头中加上这个字段就可以了. 1.AngularJS 中可以这样子: I don't know well MVC3 but you can set a custom header for all request fr…

ajax请求超时判断(转载)

ajax请求时有个参数可以借鉴一下 var ajaxTimeOut = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : 'get', //请求方式,get或post data :{}, //请求所传参数,json格式 dataType:'json',//返回的数据格式 success:function(data){ //请求成功的回调函数 alert("成功"); }, complete : function…

jQuery Ajax请求（关于火狐下SyntaxError: missing ] after element list ajax返回json，var json = eval("("+data+")"); 报错）

$.ajax({ contentType: "application/x-www-form-urlencoded;charset=UTF-8" , type: "POST", url:url, dataType: 'json', data:{}, success: function(data){ } }); 如果后台返回的是一个string类型的json串,则谷歌和IE下将它解析成string类型,而火狐下则会显示成[…

jquery ajax请求后台的简单例子

jQuery.ajax(url,[settings]) 概述通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax()可以不带任何参数直接使用. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. 回调函数如果要处理$.aja…

JQuery ajax请求一直返回Error（parsererror）

$.ajax({ type :"post", url :"busine_in.action", timeout : 40000, data: "centerid="+s, error : function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatu…

ASP.NET Core MVC请求超时设置解决方案

设置请求超时解决方案当进行数据导入时,若导入数据比较大时此时在ASP.NET Core MVC会出现502 bad gateway请求超时情况(目前对于版本1.1有效,2.0未知),此时我们需要在项目web.config配置文件中进行如下设置即可: <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <handlers>…

jquery ajax 请求中多出现一次OPTIONS请求及其解决办法

http://www.tangshuang.net/2271.html 在上一篇<服务端php解决jquery ajax跨域请求restful api问题及实践>中,我简单介绍了如何通过服务端解决jquery ajax的跨域请求问题,但是,在这个过程中,我们会发现,在很多post,put,delete等请求之前,会有一次options请求.本文主要是来讨论一下这是什么原因引起的. 根本原因就是,W3C规范这样要求了!在跨域请求中,分为简单请求(get和部分post,post时content-t…

jQuery ajax中serialize()方法增加其他参数

表单提交使用jQuery.ajax()进行表单提交时,需要传递参数,最直接的方法便是使用Form的serializa()将表单序列化,前提只是将Form表单中的name属性与数据库的字段名保持一致便可:但如果遇到再次往其中增加参数的状况呢,我们该如何处理? First: 其实,jQuery ajax的serialize() 方法是将表单序列化为键值对(key1=value1&key2=value2…)后提交,使用标准的 URL-encoded 编码表示文本字符串,而jQuery ajax-pa…

jQuery ajax 请求HttpServlet返回[HTTP/1.1 405 Method not allowed]

1.问题使用jQuery的ajax请求 Servlet 时,返回没有进入ajax的success回调函数,浏览器控制台显示 [HTTP/1.1 405 Method not allowed]. 2.解决方法网上调查,大多都是如下解释 Apache.IIS.Nginx等绝大多数web服务器,都不允许静态文件响应POST请求,否则会返回“HTTP/1.1 405 Method not allowed”错误. 即,将出错页面表单的method=“post”改为“get”即可改了 ajax 请求方法,…

jquery ajax 请求时间

$.ajax({ url:'JsLongPollingMsgServlet', type:'post', dataType:'json', data:{"pageMsgNum":$("#pageMsgNum").val()}, timeout:5000, success:function(data, textStatus){ if(data && data.msgNum){ //请求成功,刷新数据 $("#msgNum").htm…

手动停止jquery ajax请求

主要调用jquery提供的ajax abort方法,详细代码如下: <html> <head> <meta charset="UTF-8"> <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var ajax…

jQuery ajax请求struts action实现异步刷新

第一步:导入相关jar包,本样例需导入struts相关jar包,json-lib.jar,gson-2.1.jar可以任意选择,但是这里需要都导入,因为为了做测试,两种jar包的转换方式都用到了. 第二步:配置web.xml <?xml version="1.0" encoding="UTF-8"?><web-app version="3.0" xmlns="http://java.sun.com/xml/ns/jav…

精讲响应式WebClient第5篇-请求超时设置与异常处理

本文是精讲响应式WebClient第5篇,前篇的blog访问地址如下: 精讲响应式webclient第1篇-响应式非阻塞IO与基础用法精讲响应式WebClient第2篇-GET请求阻塞与非阻塞调用方法详解精讲响应式WebClient第3篇-POST.DELETE.PUT方法使用精讲响应式WebClient第4篇-文件上传与下载本文来为大家介绍一下,当WebClient请求发生异常的时候,该如何处理.为了讲解异常处理,我们需要先制造出异常,所以我们先为大家介绍:请求超时时长的设置. 一.请…

JQuery Ajax 请求参数 List 集合处理

引言 JQuery Ajax 发送请求参数一般都是基本类型,比如 String.int:那么,请求参数如果是 List 集合应该如何处理呢? 情况一:Aajx 发送 List 类型请求参数举例如下: 前端代码 //声明list var list = []; //放入string对象 for (var i = 0; i < 3; i++) { list[i]="tom"; } $.ajax({ url : 'test', data : "list":list,…

【jquery-ajax请求：超时设置，增加 loading 提升体验】的更多相关文章