JQuery系列(4) - AJAX方法

jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作。调用该方法后,浏览器就会向服务器发出一个HTTP请求。

$.ajax方法

$.ajax()的用法主要有两种。

$.ajax(url[, options])
$.ajax([options])

上面代码中的url,指的是服务器网址,options则是一个对象参数,设置Ajax请求的具体参数。

$.ajax({async: true,url: '/url/to/json',type: 'GET',data : { id : 123 },dataType: 'json',timeout: 30000,success: successCallback,error: errorCallback,complete: completeCallback,statusCode: {404: handler404,500: handler500}
})function successCallback(json) {$('<h1/>').text(json.title).appendTo('body');
}function errorCallback(xhr, status){console.log('出问题了!');
}function completeCallback(xhr, status){console.log('Ajax请求已结束。');
}
View Code

上面代码的对象参数有多个属性,含义如下:

  • accepts:将本机所能处理的数据类型,告诉服务器。
  • async:该项默认为true,如果设为false,则表示发出的是同步请求。
  • beforeSend:指定发出请求前,所要调用的函数,通常用来对发出的数据进行修改。
  • cache:该项默认为true,如果设为false,则浏览器不缓存返回服务器返回的数据。注意,浏览器本身就不会缓存POST请求返回的数据,所以即使设为false,也只对HEAD和GET请求有效。
  • complete:指定当HTTP请求结束时(请求成功或请求失败的回调函数,此时已经运行完毕)的回调函数。不管请求成功或失败,该回调函数都会执行。它的参数为发出请求的原始对象以及返回的状态信息。
  • contentType:发送到服务器的数据类型。  //发送服务器的数据类型,请求返回的数据类型是由dataType指定!!
  • context:指定一个对象,作为所有Ajax相关的回调函数的this对象。
  • crossDomain:该属性设为true,将强制向相同域名发送一个跨域请求(比如JSONP)。
  • data:向服务器发送的数据,如果使用GET方法,此项将转为查询字符串,附在网址的最后。
  • dataType:向服务器请求的数据类型,可以设为text、html、script、json、jsonp和xml。
  • error:请求失败时的回调函数,函数参数为发出请求的原始对象以及返回的状态信息。
  • headers:指定HTTP请求的头信息。
  • ifModified:如果该属性设为true,则只有当服务器端的内容与上次请求不一样时,才会发出本次请求。
  • jsonp:指定JSONP请求“callback=?”中的callback的名称。
  • jsonpCallback: 指定JSONP请求中回调函数的名称。
  • mimeType:指定HTTP请求的mime type。
  • password:指定HTTP认证所需要的密码。
  • statusCode:值为一个对象,为服务器返回的状态码,指定特别的回调函数。
  • success:请求成功时的回调函数,函数参数为服务器传回的数据、状态信息、发出请求的原始对象。
  • timeout: 等待的最长毫秒数。如果过了这个时间,请求还没有返回,则自动将请求状态改为失败。
  • type:向服务器发送信息所使用的HTTP动词,默认为GET,其他动词有POST、PUT、DELETE。
  • url:服务器端网址。这是唯一必需的一个属性,其他属性都可以省略。
  • username:指定HTTP认证的用户名。
  • xhr:指定生成XMLHttpRequest对象时的回调函数。

$.ajax简便写法

ajax方法还有一些简便写法。

  • $.get():发出GET请求。
  • $.getScript():读取一个JavaScript脚本文件并执行。
  • $.getJSON():发出GET请求,读取一个JSON文件。
  • $.post():发出POST请求。
  • $.fn.load():读取一个html文件,并将其放入当前元素之中。

一般来说,这些简便方法依次接受三个参数:url、数据、成功时的回调函数。

 

(1)$.get(),$.post()

这两个方法分别对应HTTP的GET方法和POST方法。

$.get('/data/people.html', function(html){$('#target').html(html);
});$.post('/data/save', {name: 'Rebecca'}, function (resp){console.log(JSON.parse(resp));
});
View Code

 get方法和post方法的参数相同,第一个参数是服务器网址,该参数是必需的,其他参数都是可选的。第二个参数是发送给服务器的数据,第三个参数是操作成功后的回调函数。

 

(2)$.getJSON()

ajax方法的另一个简便写法是getJSON方法。当服务器端返回JSON格式的数据,可以用这个方法代替$.ajax方法。

$.getJSON('url/to/json', {'a': 1}, function(data){console.log(data);
});

 

上面的代码等同于下面的写法。

(3)$.getScript()

$.getScript方法用于从服务器端加载一个脚本文件。

getScript的回调函数接受三个参数,分别是脚本文件的内容,HTTP响应的状态信息和ajax对象实例。

$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){console.log( data ); // test.js的内容console.log( textStatus ); // Successconsole.log( jqxhr.status ); // 200
});

 

getScript是ajax方法的简便写法,因此返回的是一个deferred对象,可以使用deferred接口

jQuery.getScript("/path/to/myscript.js").done(function() {// ...
    }).fail(function() {// ...
});

 

(4)$.fn.load()

$.fn.load不是jQuery的工具方法,而是定义在jQuery对象实例上的方法,用于获取服务器端的HTML文件,将其放入当前元素。由于该方法也属于ajax操作,所以放在这里一起讲。

$('#newContent').load('/foo.html');

$.fn.load方法还可以指定一个选择器,将远程文件中匹配选择器的部分,放入当前元素,并指定操作完成时的回调函数。

$('#newContent').load('/foo.html #myDiv h1:first',function(html) {console.log('内容更新!');
});

load方法可以附加一个字符串或对象作为参数,一起向服务器提交。如果是字符串,则采用GET方法提交;如果是对象,则采用POST方法提交

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {console.log( "已经载入" );
});

上面代码将{ limit: 25 }通过POST方法向服务器提交。

Ajax其它

ajax事件方法绑定

jQuery提供以下一些方法,用于指定特定的AJAX事件的回调函数。

  • .ajaxComplete():ajax请求完成。
  • .ajaxError():ajax请求出错。
  • .ajaxSend():ajax请求发出之前。
  • .ajaxStart():第一个ajax请求开始发出,即没有还未完成ajax请求。
  • .ajaxStop():所有ajax请求完成之后。
  • .ajaxSuccess():ajax请求成功之后。

下面是示例。

//Ajax请求指示器
$('#loading_indicator')
.ajaxStart(function (){$(this).show();})
.ajaxStop(function (){$(this).hide();});//下面是处理Ajax请求出错(返回404或500错误)的例子。
$(document).ajaxError(function (e, xhr, settings, error) {console.log(error);
});

返回值

ajax方法返回的是一个deferred对象,可以用then方法为该对象指定回调函数.

详细参见:JQuery系列(5) - Deferred对象

JSONP

由于浏览器存在“同域限制”,ajax方法只能向当前网页所在的域名发出HTTP请求。但是,通过在当前网页中插入script元素(<script>),可以向不同的域名发出GET请求,这种变通方法叫做JSONP(JSON with Padding)。

ajax方法可以发出JSONP请求,方法是在对象参数中指定dataType为JSONP。

$.ajax({url: '/data/search.jsonp',data: {q: 'a'},dataType: 'jsonp',success: function(resp) {$('#target').html('Results: ' + resp.results.length);}
});)

JSONP的通常做法是,在所要请求的URL后面加在回调函数的名称。ajax方法规定,如果所请求的网址以类似“callback=?”的形式结尾,则自动采用JSONP形式。所以,上面的代码还可以写成下面这样。

$.getJSON('/data/search.jsonp?q=a&callback=?',function(resp) {$('#target').html('Results: ' + resp.results.length);}
);

 

文件上传

假定网页有一个文件控件。

<input type="file" id="test-input">

方法1,将文件作为表单数据上传:

var file = $('#test-input')[0].files[0];
var formData = new FormData();formData.append('file', file);$.ajax('myserver/uploads', {method: 'POST',contentType: false,processData: false,data: formData
});

 

方法2,直接发送文件:
var file = $('#test-input')[0].files[0];$.ajax('myserver/uploads', {method: 'POST',contentType: file.type,processData: false,data: file
});

参考

【1】阮一峰 http://javascript.ruanyifeng.com/jquery/utility.html#toc2   

 

 

 

转载于:https://www.cnblogs.com/ybtools/p/6819719.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/269468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android自定义渐变色,Android设置背景渐变色

效果如图&#xff0c;本章只谈背景渐变色&#xff0c;仪表盘下一篇文章实现步骤&#xff0c;只需两步&#xff1a;1.在res/drawable中新建一个gradual_color_bg.xml内容如下&#xff1a;android:startColor"#aa000000" 渐变起始色值android:centerColor""…

dos批处理命令详解

一.简单批处理内部命令简介 1.Echo 命令 打开回显或关闭请求回显功能&#xff0c;或显示消息。如果没有任何参数&#xff0c;echo 命令将显示当前回显设置。 语法 echo [{on│off}] [message] Sample&#xff1a; echo off / echo hello world 在实际应用中我们会把…

mac安装npm

brew install node npm install 打包 启动项目 npm run dev 1、npm介绍 npm是基于nodejs的包管理器 从npm服务器下载别人编写的第三方包、模块到本地使用 从npm服务器下载安装别人编写的命令行程序到本地使用 将自己写的包、模块或者命令行程序上传到npm服务器、共别人下…

android navigation bar高度,Android获取屏幕真实高度包含NavigationBar(底部虚拟按键)

释放双眼&#xff0c;带上耳机&#xff0c;听听看~&#xff01;public int getScreentHeight() {int heightPixels;WindowManager w this.getWindowManager();Display d w.getDefaultDisplay();DisplayMetrics metrics new DisplayMetrics();d.getMetrics(metrics);// since…

tarjan求LCA模板

废话不多说&#xff0c;模板拿来。 1 # include <iostream>2 # include <cstdio>3 # include <cstring>4 # include <string>5 # include <cmath>6 # include <vector>7 # include <map>8 # include <queue>9 # include <c…

BXNA在调试显示新闻的JS?

今天发现了BXNA提供的显示BXNA新闻的JS工作不正常&#xff0c;首先是显示的内容并不是最新的东西&#xff0c;其次就是下午竟然发现JS脚本报错了&#xff0c;我想是不是我这边的问题呢&#xff1f;到了BXNA看了看范例程序竟然也报错了&#xff0c;我想只有两个可能&#xff0c;…

mac安装dubbo-admin

访问 https://github.com/apache/dubbo-admin 1&#xff1a;找到dubbo-admin git下载地址 2:git下载项目 3:执行 mvn clean install 执行 zmvn clean package -Dmaven.test.skiptrue 执行 java -jar dubbo-admin-0.3.0-SNAPSHOT.jar mac电脑安装npm 执行 brew install …

android mmi自动安装,Android平台MMI自动化测试工具通信协议.pdf

File name: Android 平台MMI 自动化测试工具通信协议Version: V1.0 Date&#xff1a;2013/03/07Author: Min LiuAndroid 平台MMI 自动化测试工具通信协议1File name: Android 平台MMI 自动化测试工具通信协议Version: V1.0 Date&#xff1a;2013/03/07Author: Min Liu需通信指令…

详解JavaScript中void语句的使用

void是在JavaScript中的一个重要的关键字可被用作其单操作数之前出现一元运算符&#xff0c;其可以是任何类型。 此运算符指定不需要返回值&#xff0c;进行计算的表达式。它的语法可能是下列之一&#xff1a; <script type"text/javascript"> void func() jav…

EditPlus使用一巧

在查看菜单里语法高亮打钩就可以显示颜色&#xff0c;否则不会颜色显示。

Mac下使用终端查看某个端口号对应的进程和杀死进程

查看端口号对应的进程 打开终端&#xff0c;输入lsof -i tcp:port&#xff0c;port即为端口号&#xff0c;如8080 如回车之后结果如图&#xff1a; 使用kill -9 PID

创建基于AJAX技术的Scribble应用程序

简介ASP.NET Atlas是一套丰富的类库&#xff0c;用于ASP.NET开发AJAX风格的应用程序。本文试图解说Atlas框架的一般性特征&#xff0c;由于Atlas是一个庞大的库&#xff0c;故本文集中探讨Atlas的两个最重要的特征&#xff1a;1. 能够从客户端脚本中调用服务器端web服务2. 使得…

个人进度(04)

昨天&#xff1a; 做一些有关ListView控件的设计。 今天&#xff1a; 学习其他控件&#xff0c;学习制作menu菜单&#xff0c;继续个人店铺UI的设计。 困难&#xff1a; ListView控件仍有一些问题。 转载于:https://www.cnblogs.com/yifengyifeng/p/6850712.html

开坛第一章

开坛第一章开坛第一章转载于:https://blog.51cto.com/aaron/3424

linux crontab怎么写,linux定时任务crontab

利用linux的定时任务crontab来执行脚本&#xff0c;在centos7版本下运行1、安装crontabyum install crontab2、查看状态及关闭和启动任务查看状态&#xff1a;systemctl status crond.service停止&#xff1a;systemctl stop crond.service启动&#xff1a;systemctl start cro…

leetcode第一刷_Binary Tree Zigzag Level Order Traversal

以出现的频率来看。树的层序遍历一定是考察的重点&#xff0c;除非工作人员想找题水数量。 zigzag&#xff0c;还是有几道题的&#xff0c;层序的这个非常easy&#xff0c;假设是奇数层。reverse下面就可以。无他。我写的时候预计还不知道这个函数。要么怎么这么拙呢。。class …

.Net开发环境配置[OS/IIS/VS...]

发布日期&#xff1a; 5/6/2006| 更新日期&#xff1a; 5/6/2006谢平 夕阳轨迹 QQ&#xff1a;19999351http://birdshover.cnblogs.com.Net开发环境安装貌视简单,但是,如果有些小细节不注意,却会出现莫名奇妙的错误.本文主要讲解ASP.NET的配置。水平所限&#xff0c;不足之…

android resolvesize方法,Android 自定义View中onMeasure()中使用resolveSize()是什么意思?

缥缈止盈public static int resolveSize(int size, int measureSpec) { int result size; int specMode MeasureSpec.getMode(measureSpec); int specSize MeasureSpec.getSize(measureSpec); switch (specMode) { case MeasureSp…

macOS下Apache+nginx+mysql+php多版本切换的配置

macOS下Apachenginxmysqlphp多版本切换的配置 1.安装Homebrew 首先我们要先安装homebrew一个能让你很方便下载Apache、nginx、php的小工具 $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 然后输入密码&#xff0c;安…