AJAX:success,error,complete,beforeSend使用例子及解释

前端之家收集整理的这篇文章主要介绍了AJAX:success,error,complete,beforeSend使用例子及解释前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在与后台交互的时候,经常使用到jQuery的ajax()方法来请求数据;

回调函数用的比较多的是success,但是complete、beforeSend、error函数也是很有用的;

beforeSend函数用于发送请求前修改XMLHttpRequest对象。其中参数就是XMLHttpRequest对象,由于该函数本身是jQuery事件,因此,如果函数返回false,则表示取消本次事件。

complete 函数用于请求完成后调用的回调函数,该函数无论数据发送成功或失败都会调用,该函数有两个参数,一个是XMLHttpRequest对象,另一个是strStatus,用于描述成功请求类型的字符串。

success 函数用于请求成功后调用的回调函数,该函数有三个参数。第一个是XMLHttpRequest对象,第二个是strError,第三个是捕捉到的错误对象strObject

error  函数用于请求失败后调用的回调函数,该函数有三个参数,第一个是XMLHttpRequest对象,第二个是出错信息strError,第三个是 捕捉到的错误对象strObject。

下面是使用例子小结:

HTML代码

  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. headMetacharset="UTF-8"title>ajax_demo</style .display{
  4. width:600px;
  5. height:400px;
  6. border:1pxsolid;
  7. }
  8. bodydivclass="Box">展示数据区域:divdivclass="display"/>inputtype="button"value="点击获取数据"id="inp"onclick="getData()"/>
  9. scripttype="text/javascript"src="jquery.min.js">scriptscripttype="text/javascript"src="bootstrap.min.js"scripttype="text/javascript">
js代码timeoutcache

[javascript]copy
    <scripttype="text/javascript">
  1. functiongetData(){
  2. $.ajax({
  3. url:'http://192.168.31.227/sfytjjk/wdaj/wdla.PHP',
  4. type:"post",
  5. timeout:5000,
  6. 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){
  7. console.log(this);
  8. $("#inp").val("正在获取数据...");
  9. },
  10. success:function(data){
  11. console.log(data);
  12. $(".display").html("获取到的数据:</br>");
  13. $(".display").append("总条数:"+data.data.all_count);
  14. $("#inp").val("点击获取数据");
  15. complete:function(XMLHttpRequest,textStatus){
  16. if(textStatus=='timeout'){
  17. varxmlhttp=window.XMLHttpRequest?newwindow.XMLHttpRequest():newActiveXObject("Microsoft.XMLHttp");
  18. xmlhttp.abort();
  19. $(".Box").html("网络超时!");
  20.     }
  21. error: console.log(XMLHttpRequest);//XMLHttpRequest.responseTextXMLHttpRequest.statusXMLHttpRequest.readyState
  22. console.log(textStatus);
  23. $(".Box").html("服务器错误!");
  24. }
  25. });
  26. /*
  27. 通过捕捉error事件来获取出错的信息:
  28. error:function(XMLHttpRequest,textStatus,errorThrown){
  29. alert(XMLHttpRequest.status);
  30. alert(XMLHttpRequest.readyState);
  31. alert(textStatus);
  32. }
  33. XMLHttpRequest.readyState:状态码的意思
  34. 0-(未初始化)还没有调用send()方法
  35. 1-(载入)已调用send()方法,正在发送请求
  36. 2-(载入完成)send()方法执行完成,已经接收到全部响应内容
  37. 3-(交互)正在解析响应内容
  38. 4-(完成)响应内容解析完成,可以在客户端调用
  39. status:返回的HTTP状态码,比如常见的404,500等错误代码
  40. statusText:对应状态码的错误信息,比如404错误信息是notfound,500是InternalServerError。
  41. responseText:服务器响应返回的文本信息
  42. complete:function(XMLHttpRequest,0); background-color:inherit">//textStatus的值:success,notmodified,nocontent,error,timeout,abort,parsererror
  43. },0); background-color:inherit">//textStatus的值:null,parsererror
  44. //errorThrown的值:收到http出错文本,如NotFound或InternalServerError.
  45. }
  46. */
  47. </script>
原文链接:https://www.f2er.com/ajax/161414.html

猜你在找的Ajax相关文章