$.ajax({})方法success,error,complete,beforeSend使用例子及解释
在与后台交互的时候,经常使用到jquery的$.ajax()方法来请求数据;
回调函数用的比较多的是success,但是complete、beforeSend、error函数也是很有用的;
下面是使用例子小结:
html代码:
- <!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, textStatus, errorThrown) {
- //textStatus的值:null, timeout, error, abort, parsererror
- //errorThrown的值:收到http出错文本,如 Not Found 或 Internal Server Error.
- }
- */
- }
- </script>
原文链接:http://blog.csdn.net/qq_30337695/article/details/51373727
随机推荐
- FTP之虚拟用户
基于虚拟用户访问ftp关闭防火墙,selinux 过程如下1.装包,配置.起服务配置过程如下: 需写入vsftpd.conf配置文件中的内容如下: anonymous_enable=NO ---- 匿 ...
- 还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...
- AngularJS2之Angular正式初探
前言:angular的官方教程真的不错.强烈推荐!!!] 按照环境搭建教程新建一个项目: 项目的结构如下: 其中package.json指示node需要安装的插件(npm install指令会安装的插 ...
- 怎么删除hao.qquu8.com绑定
运行 输入 regedit 编辑 - 查找 hao.qquu8.com 然后修改成 你想绑定的 主页 就好
- 读取Oracle表结构数据
<html lang="zh-cn"> <head> <meta name="generator" content="O ...
- ECMAScript6之Array类型的扩展
数组的扩展 Array.of() 将一组值转换成数组 Array.of(1,2,3,4,5); //[1,2,3,4,5] Array.from() 可将类似数组的对象或者可便利的对象转换成数组,比如 ...
- eclipse中debug快捷方式
eclipse中如何跳转到指定行 :ctrl+L 然后输入行数 F5:跳入方法 F6:向下逐行调试 F7:跳出方法 F8:直接跳转到下一个断点 持续更新
- matlab中选择图片路径
%读取训练图片数据文件 [FileName,PathName] = uigetfile('*.*','选择测试图片数据文件t10k-images.idx3-ubyte'); %暴露图片路径 saved ...
- 制作Ubuntu14.04的Openstack镜像
下载好Ubuntu官方镜像安装文件:不要使用desktop版,在virtualbox和vm上都安装报错,因为不需要桌面,所有没去管了. 第一步.准备好如下文件: 1.ubuntu-14.04.4-se ...
- MyBatis 学习-动态 SQL 篇
MyBatis 为我们提供了如下几个动态 SQL 元素: if choose foreach where/set trim 一.IF 元素 <select id="selectProj ...