jquery实现AJAX的4种方法
当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和 HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问题,更幸福的是你的js代码将大大地简化,看完本文,你会发 现,ajax,简单的来讲就是一句话的事情。
本文重点是来讲讲jQuery中调用ajax的4种方法:$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识,或者没有ajax的概念,那么请先去问问google老大,再来读本文。
1、$.get
$.get()方法使用GET方式来进行异步请求,它的语法结构为:
$.get( url [, data] [, callback] )
解释一下这个函数的各个参数:
url:string类型,ajax请求的地址。
data:可选参数,object类型,发送至服务器的key/value数据会作为QueryString附加到请求URL中。
callback:可选参数,function类型,当ajax返回成功时自动调用该函数。
最后写一个$.get()的实例供大家参考:
$.get( "submit.aspx",
{ id: '123', name: '青藤园', },
function(data,state){
//这里显示从服务器返回的数据
alert(data);
//这里显示返回的状态
alert(state); })
2、$.post()
$.post()方法使用POST方式来进行异步请求,它的语法结构为:
$.post(url,[data],[callback],[type])
这个方法和$.get()用法差不多,唯独多了一个type参数,那么这里就只介绍type参数吧,其他的参考上面$.get()的。
type:type为请求的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和$.get()返回的格式一样,都是字符串的。
最后写一个$.post()的实例供大家参考:
$.post( "submit.aspx",
{ id: '123', name: '青藤园', },
function(data,state){
//这里显示从服务器返回的数据
alert(data);
//这里显示返回的状态
alert(state);
},
"json");
3、$.getJSON()
$.getJSON()是专门为ajax获取json数据而设置的,并且支持跨域调用,其语法的格式为:
getJSON(url,[data],[callback])
url:string类型, 发送请求地址
data :可选参数, 待发送 Key/value 参数 ,同get,post类型的data
callback :可选参数,载入成功时回调函数,同get,post类型的callback
JSON
是一种理想的数据传输格式,它能够很好的融合与JavaScript或其他宿主语言,并且可以被JS直接使用。使用JSON相比传统的通过
GET、POST直接发送“裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的
ajax()函数的一个简化版本。这个函数也是可以跨域使用的,相比get()、post()有一定优势。另外这个函数可以通过把请求url写
成"myurl?callback=X"这种格式,让程序执行回调函数X。
提示:数据最终还是通过url后面通过get方式发送数据出去的,这就决定了,发送的data数据量不能太多,否则造成url太长接收失败(getJSON方式是不可能有post方式递交的)。
4、$.ajax()
$.ajax()是jquery中通用的一个ajax封装,其语法的格式为:
$.ajax(options)
其中options是一个object类型,它指明了本次ajax调用的具体参数,这里我把最常用的几个参数附上
$.ajax({
url: 'submit.aspx',
datatype: "json",
type: 'post',
success: function (e) {
//成功后回调
alert(e);
},
error: function(e){
//失败后回调
alert(e);
},
beforeSend: function(){
//发送请求前调用,可以放一些"正在加载"之类额话
alert("正在加载");
}})
好了,以上就是jquery实现ajax调用的几种方法,希望对大家有所帮助。
jquery实现AJAX的4种方法的更多相关文章
- 通过XMLHttpRequest和jQuery实现ajax的几种方式
AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...
- jQuery中ajax的4种常用请求方式
jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...
- MVC异步AJAX的三种方法(JQuery的Get方法、JQuery的Post方法和微软自带的异步方法)
异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...
- JQuery的Ajax使用Get,Post方法调用C#WebService并返回数据
本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有出 ...
- Jquery调用webService的四种方法 转载-记录
我总结几个关键点 1. 服务必须声明为ScriptService(否则会出现下面的问题) 2.服务的方法不需要任何更改,保持原状 3.客户端用jquery的.ajax方法来调用 3.1 type必须是 ...
- ajax 使用 三种方法 设置csrf_token的装饰器
1. CSRF中间件 CSRF跨站请求伪造 2. 补充两个装饰器 from django.views.decorators.csrf import csrf_exempt, csrf_prote ...
- 【jQuery】初始化的三种方法
JQ初始化方法实际上有两种,由于美元符号可以定义 jQuery,那么就有三种方法可以进行初始化操作,根据个人习惯来选择吧! 第一种 $(document).ready(function(){ // j ...
- jquery 操作iframe的几种方法总结
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...
- js jquery 获取服务器控件的三种方法
由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID=" ...
随机推荐
- React Native 打包.jsx文件
最近在研究React Native.感觉开发效率确实不错,但jsx语法写起来感觉不怎么顺手. 试用了Sublime Text 3和Visual Studio Code写代码,感觉反应总是慢一拍. 还是 ...
- IE关闭兼容性视图
不知道什么时候,ie8的“兼容性视图设置”变成了灰色,如图: 今天通过设置组策略,终以解决了这个问题: ie8的兼容性视图设置灰色的解决办法:运行gpedit.msc--用户配置/计算机配置--管理 ...
- Win环境下的文件读写
在win环境下,有许多方法可以对文件进行读写操作,如MFC 中的CFile类,及一些开源的项目如QT中的QFile.开源的好得是可以多平台,而MFC只是微软自家的东西,对于想写跨平台的人,最好不用MF ...
- Access restriction: The type TaskTopicResolver is not accessible due to restrict
Access restriction: The type TaskTopicResolver is not accessible due to restrict : Eclipse 默认把这些受访问 ...
- 数组操作splice
今天,实现某个功能时需要操作数组, var array=[1,2,3,3,4]; console.log(array); //结果: 1,2,3,3,4 var data=arr ...
- C++虚函数的陷阱
首先看一段代码: class B { public: ) { std::cout << "base fun called, " << i; }; }; cl ...
- elasticsearch rpm 安装
参考:http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/setup-repositories.html Dow ...
- Javascript生成随机数
随机数在前后端都比较常用,用途也较广.这里记录一下前端的实现方法,代码比较简单,封装成函数可随时调用. 具体如下: function getRandNum(n){ return Math.floor( ...
- kafka 订单应用需求
kafka的介绍就不说了,网上会找到一大堆. 为了公司做报表需要对卡券订单的销售情况做总结,所以每次下单的时候都要给卡券活动模块传递一次消息,并把订单的信息发送给活动,活动做相应的数据操作,因为数据量 ...
- 关于w3school的html5部分output 元素实例代码(点亲自试一试进去)的问题纠正
修复: 将原来的 = 号修改成 <input type="button" onclick="resCalc()" value ="=" ...