$.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
随机推荐
- java如何避免死锁
在有些情况下死锁是可以避免的.本文将展示三种用于避免死锁的技术: 加锁顺序 加锁时限 死锁检测 加锁顺序 当多个线程需要相同的一些锁,但是按照不同的顺序加锁,死锁就很容易发生. 如果能确保所有的线程都 ...
- mysql数据库 触发器简单实例
触发器(trigger):监视某种情况,并触发某种操作. 触发器创建语法四要素:1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/befo ...
- Js-Html 前端系列--checkbox
今天搞全选按钮,设置Checkbox的时候,处于Checked状态但是不显示勾.最后得出解决方案: var c = boxcList.eq(i).attr("checked"); ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- Kattis - Aaah!
Aaah! Photo by Unknown Jon Marius shouted too much at the recent Justin Bieber concert, and now need ...
- CHM木马
一. 弹出计算器 打开EasyCHM,工具 -> 反编译指定的CHM,选择目标文件和反编译工作目录. 进入反编译的工作目录,找到并编辑主页文件,这里是index.html 在<body&g ...
- aop为系统添加操作日志,注入或配置声明的方式来实现
最近做项目实现操作记录添加日志,由于aop这两种实现方式各有优缺点,所以都实现了一下以后根据具体业务选择. 1实现方式一注入: 1.1首先在xml中开启aop注入,需要引入的包此处省略,可百度自己查找 ...
- CentOS yum升级GCC到4.8
wget http://people.centos.org/tru/devtools-2/devtools-2.repo .repo /etc/yum.repos.d --binutils devto ...
- Fedora24 升级到25
1 安装dnf-plugin-system-upgrade dnf install dnf-plugin-system-upgrade 2 更新软件包 dnf system-upgrade downl ...
- mybatis学习笔记四(动态sql)
直接贴图,注解在代码上,其他的配置文件在学习一中就不贴了 1 数据库 2 实体类 package com.home.entity; /** * 此类是: 用户实体类 * @author hpc * @ ...