在与后台交互的时候,经常使用到jQuery的ajax()方法来请求数据;
回调函数用的比较多的是success,但是complete、beforeSend、error函数也是很有用的;
beforeSend该函数用于发送请求前修改XMLHttpRequest对象。其中参数就是XMLHttpRequest对象,由于该函数本身是jQuery事件,因此,如果函数返回false,则表示取消本次事件。
complete 该函数用于请求完成后调用的回调函数,该函数无论数据发送成功或失败都会调用,该函数有两个参数,一个是XMLHttpRequest对象,另一个是strStatus,用于描述成功请求类型的字符串。
success 该函数用于请求成功后调用的回调函数,该函数有三个参数。第一个是XMLHttpRequest对象,第二个是strError,第三个是捕捉到的错误对象strObject
error 该函数用于请求失败后调用的回调函数,该函数有三个参数,第一个是XMLHttpRequest对象,第二个是出错信息strError,第三个是 捕捉到的错误对象strObject。
下面是使用例子小结:
html代码:
- <!DOCTYPEhtml>
- <htmllang="en">
- headmetacharset="UTF-8"title>ajax_demo</style .display{
- width:600px;
- height:400px;
- border:1pxsolid;
- }
- bodydivclass="box">展示数据区域:divdivclass="display"/>inputtype="button"value="点击获取数据"id="inp"onclick="getData()"/>
- scripttype="text/javascript"src="jquery.min.js">scriptscripttype="text/javascript"src="bootstrap.min.js"scripttype="text/javascript">
js代码:timeoutcache
<scripttype="text/javascript">
- functiongetData(){
- $.ajax({
- url:'http://192.168.31.227/sfytjjk/wdaj/wdla.php',
- type:"post",
- timeout:5000,
- async:true,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> cache: data:"user_id=12&page=0",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> dataType:"json",248)"> contentType:"application/x-www-form-urlencoded",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> beforeSend:function(XMLHttpRequest){
- console.log(this);
- $("#inp").val("正在获取数据...");
- },
- success:function(data){
- console.log(data);
- $(".display").html("获取到的数据:</br>");
- $(".display").append("总条数:"+data.data.all_count);
- $("#inp").val("点击获取数据");
- complete:function(XMLHttpRequest,textStatus){
- if(textStatus=='timeout'){
- varxmlhttp=window.XMLHttpRequest?newwindow.XMLHttpRequest():newActiveXObject("Microsoft.XMLHttp");
- xmlhttp.abort();
- $(".box").html("网络超时!");
- }
- error: console.log(XMLHttpRequest);
- console.log(textStatus);
- $(".box").html("服务器错误!");
- }
- });
-
-
-
- error:function(XMLHttpRequest,textStatus,errorThrown){
- alert(XMLHttpRequest.status);
- alert(XMLHttpRequest.readyState);
- alert(textStatus);
- }
- XMLHttpRequest.readyState:状态码的意思
- 0-(未初始化)还没有调用send()方法
- 1-(载入)已调用send()方法,正在发送请求
- 2-(载入完成)send()方法执行完成,已经接收到全部响应内容
- 3-(交互)正在解析响应内容
- 4-(完成)响应内容解析完成,可以在客户端调用了
- status:返回的HTTP状态码,比如常见的404,500等错误代码。
- statusText:对应状态码的错误信息,比如404错误信息是notfound,500是InternalServerError。
- responseText:服务器响应返回的文本信息
- complete:function(XMLHttpRequest,0); background-color:inherit">//textStatus的值:success,notmodified,nocontent,error,timeout,abort,parsererror
- },0); background-color:inherit">//textStatus的值:null,parsererror
- //errorThrown的值:收到http出错文本,如NotFound或InternalServerError.
- }
- */
- </script>
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|