$.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
随机推荐
- TFS Services 集成Docker
随着Docker的爆发,越来越多软件研发团体开始享用和受益于Docker系统体系带来的巨大好处.Docker的使用,除了减少软硬件成本的立竿见影效果,更是对软件生命周期过程开发.测试.生成部署和运维整 ...
- Kafka consumer处理大消息数据问题
案例分析 处理kafka consumer的程序的时候,发现如下错误: ERROR [2016-07-22 07:16:02,466] com.flow.kafka.consumer.main.Kaf ...
- 设计模式 -- 桥接模式(Bridge Pattern)
桥接模式 Bridge Pattern 结构设计模式 定义: 分离抽象部分和实现部分,使他们独立运行. 避免使用继承导致系统类个数暴增,可以考虑桥接模式. 桥接模式将继承关系转化为关联关系,减少耦合, ...
- MATLAB符号极限、导数及级数求和
作者:长沙理工大学 交通运输工程学院 王航臣 1.函数的极限 函数:limit 功能:求取函数的极限 语法: limit(f) limit(f,x,a) limit(f,x,a,'right') li ...
- RPC 框架原理详解
首先了解什么叫RPC,为什么要RPC,RPC是指远程过程调用?也就是说两台服务器A,B,一个应用部署在A服务器上,想要调用B服务器上应用提供的函数/方法,由于不在一个内存空间,不能直接调用,需要通过网 ...
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
- Html5NodeJs安装less之千辛万苦CMD系列
如题,这个东西很是费了一般脑筋 上一次讲了如何在浏览器端解析less文件,这次是在cmd中使用npm中的less模块来解析 详解如下 首下我们去下载一个NodeJs, 我下载的是4.44版本,一路 ...
- metrics实践 (metrics-spring)
这里主要介绍metrics与spring集成的使用方式. 1 添加maven依赖 <dependency> <groupId>com.ryantenney.metrics&l ...
- 【Java】ArrayList 的 toArray() 方法抛出 ClassCastException 异常
第一次用这个方法,结果冒出个莫名其妙的异常来: String[] names = (String[]) mTags.toArray(); 结果会抛出 java.lang.ClassCastExcept ...
- 技能学习经验与C语言学习调查
技能学习经验与C语言学习调查 前言 要说的话,这还是我第一次写博客.不论是为了作业也好,为了将来的学习工作也好,写博客都是必不可少的,也算是个自我提升的途径吧.不过第一次写博客,就用从来没听说过的ma ...