在与后台交互的时候,经常使用到jquery的$.ajax()方法来请求数据;
回调函数用的比较多的是success,但是complete、beforeSend、error函数也是很有用的;
下面是使用例子小结:
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>ajax_demo</title> </head> <style> .display{ width:600px; height: 400px; border:1px solid; } </style> <body> <div class="Box">展示数据区域:</div> <div class="display"/></div> <input type="button" value="点击获取数据" id="inp" onclick="getData()"/> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript">js代码:
<script type="text/javascript"> function getData(){ $.ajax({ url:'http://192.168.31.227/sfytjjk/wdaj/wdla.PHP',type:"post",timeout:5000,async:true,cache:true,data:"user_id=12&page=0",dataType:"json",contentType:"application/x-www-form-urlencoded",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'){ var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xmlhttp.abort(); $(".Box").html("网络超时!"); } $("#inp").val("点击获取数据"); },error:function(XMLHttpRequest,textStatus){ console.log(XMLHttpRequest); //XMLHttpRequest.responseText XMLHttpRequest.status XMLHttpRequest.readyState console.log(textStatus); $(".Box").html("服务器错误!"); } }); /* 通过捕捉error事件来获取出错的信息: 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错误信息是not found,500是Internal Server Error。 responseText :服务器响应返回的文本信息 complete: function (XMLHttpRequest,textStatus) { //textStatus的值:success,notmodified,nocontent,error,timeout,abort,parsererror },error: function (XMLHttpRequest,errorThrown) { //textStatus的值:null,parsererror //errorThrown的值:收到http出错文本,如 Not Found 或 Internal Server Error. } */ } </script>关于ajax的开始的一些参数,cache,contentType等等,自己查下看看就明白了。