在与后台交互的时候，经常使用到jquery的$.ajax()方法来请求数据；

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

下面是使用例子小结：

html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ajax_demo</title>
  6. </head>
  7. <style>
  8. .display{
  9. width:600px;
  10. height: 400px;
  11. border:1px solid;
  12. }
  13. </style>
  14. <body>
  15. <div class="box">展示数据区域:</div>
  16. <div class="display"/></div>
  17. <input type="button" value="点击获取数据" id="inp" onclick="getData()"/>
  18. <script type="text/javascript" src="jquery.min.js"></script>
  19. <script type="text/javascript" src="bootstrap.min.js"></script>
  20. <script type="text/javascript">

js代码：

  1. <script type="text/javascript">
  2. function getData(){
  3. $.ajax({
  4. url:'http://192.168.31.227/sfytjjk/wdaj/wdla.php',
  5. type:"post",
  6. timeout:5000,
  7. async:true,
  8. cache:true,
  9. data:"user_id=12&page=0",
  10. dataType:"json",
  11. contentType:"application/x-www-form-urlencoded",
  12. beforeSend:function(XMLHttpRequest){
  13. console.log(this);
  14. $("#inp").val("正在获取数据...");
  15. },
  16. success:function(data){
  17. console.log(data);
  18. $(".display").html("获取到的数据:</br>");
  19. $(".display").append("总条数:"+data.data.all_count);
  20. $("#inp").val("点击获取数据");
  21. },
  22. complete:function(XMLHttpRequest,textStatus){
  23. if(textStatus=='timeout'){
  24. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  25. xmlhttp.abort();
  26. $(".box").html("网络超时！");
  27. 　　　　}
  28. $("#inp").val("点击获取数据");
  29. },
  30. error:function(XMLHttpRequest, textStatus){
  31. console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState
  32. console.log(textStatus);
  33. $(".box").html("服务器错误！");
  34. }
  35. });
  36. /*
  37. 通过捕捉error事件来获取出错的信息:
  38. error: function(XMLHttpRequest, textStatus, errorThrown) {
  39. alert(XMLHttpRequest.status);
  40. alert(XMLHttpRequest.readyState);
  41. alert(textStatus);
  42. }
  43. XMLHttpRequest.readyState: 状态码的意思
  44. 0 － （未初始化）还没有调用send()方法
  45. 1 － （载入）已调用send()方法，正在发送请求
  46. 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
  47. 3 － （交互）正在解析响应内容
  48. 4 － （完成）响应内容解析完成，可以在客户端调用了
  49. status:返回的HTTP状态码，比如常见的404,500等错误代码。
  50. statusText:对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。
  51. responseText ：服务器响应返回的文本信息
  52. complete: function (XMLHttpRequest, textStatus) {
  53. //textStatus的值：success,notmodified,nocontent,error,timeout,abort,parsererror
  54. },
  55. error: function (XMLHttpRequest, textStatus, errorThrown) {
  56. //textStatus的值：null, timeout, error, abort, parsererror
  57. //errorThrown的值：收到http出错文本，如 Not Found 或 Internal Server Error.
  58. }
  59. */
  60. }
  61. </script>

原文链接：http://blog.csdn.net/qq_30337695/article/details/51373727

随机推荐

  1. EL表达式学习

    EL表达式取值 1.EL表达式的语法格式很简单: 以前编写jsp代码时,如果要获取表单中的用户名,一般使用 <%=request.getParameter("name")%& ...

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

    1.状态码返回200--表明服务器正常响应了客户端的请求:       2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据.         ...

  3. 结构-行为-样式-Css Div 居中的一个最佳实践

    最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class=" ...

  4. Eclipse 中，web项目在Tomcat运行时填写不了Server name

    最近开发项目,从MyEclipse中导入项目到Eclipse中,那些WEB属性都在,可就是不能在Tomcat上运行.纠结一番,最后发现是这个问题: WEB的版本问题. 具体问题看下图: 解决方案: W ...

  5. Google Daydream 在中国的第一次演讲摘录

    从 PC.手机到 VR/AR,计算机平台正在迁移,而在这个过程中,与用户使用体验息息相关的「人机交互方式」也将不可避免的发生变化.作为这几波浪潮的弄潮儿,Google 怎么看这种人机交互方式的演进? ...

  6. git 基本用法

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #454545 } p. ...

  7. 想入门webpack，这篇就够了

    申明:本文转载自简书 文/zhangwang(简书作者)原文链接:http://www.jianshu.com/p/42e11515c10f#著作权归作者所有,转载请联系作者获得授权,并标注" ...

  8. javascript根据元素自定义属性获取元素，操作元素

    写在前面:给某个或多个元素自定义属性data-tar,想获取data-tar='123'的元素来进行进一步的操作,如何实现? function getElementByAttr(tag,attr,va ...

  9. Mutex的使用方法以及封装的AutoLock介绍（转载）

    Mutex-互斥类 互斥类-MutexMutex是互斥类,用于多线程访问同一个资源的时候,保证一次只有一个线程能访问该资源.在<Windows核心编程>①一书中,对于这种互斥访问有一个很形 ...

  10. MATLAB中的多项式运算

    作者:长沙理工大学 交通运输工程学院 王航臣 1.多项式求根 在MATLAB中求取多项式的根用roots函数. 函数:roots 功能:一元高次方程求解. 语法:roots(c) 说明:返回一个列向量 ...