深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
当我们用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()的实例供大家参考:
|
1
2
3
4
5
6
7
8
9
10
11
|
$.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()的实例供大家参考:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$.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。
4、$.ajax()
$.ajax()是jquery中通用的一个ajax封装,其语法的格式为:
$.ajax(options)
其中options是一个object类型,它指明了本次ajax调用的具体参数,这里我把最常用的几个参数附上
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$.ajax({ url: 'submit.aspx', datatype: "json", type: 'post', success: function (e) { //成功后回调 alert(e); }, error: function(e){ //失败后回调 alert(e); }, beforeSend: function(){ /发送请求前调用,可以放一些"正在加载"之类额话 alert("正在加载"); }}) |
好了,以上就是jquery实现ajax调用的几种方法,希望对大家有所帮助。
深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法的更多相关文章
- ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...
- 理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
ajax的4种方法:$.get.$.post.$getJSON.$ajax. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] ...
- jQuery中$.get、$.post、$.getJSON和$.ajax的用法
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...
- 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法
在WEB开发中异步请求方式普遍使用,ajax技术减少程序员的工作量,也提升用户交互体验.AJAX的四种异步请求方式都能实现基本需求,闲话不多说,直接切入正题. 1.$.getJSON $.getJSO ...
- 深入理解jQuery、Angular、node中的Promise
最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
- 深入分析,理解jQuery.Deferred源码
前言: 如果你对jQuery.Callback回调对象不了解,或者只掌握其方法,但是没有通过阅读源码理解,可以先阅读 前一章jQuery.Callbacks源码解读二,因为只有完全理解jQuery.C ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- 从html页面加载顺序来更好的理解jquery初始化
一,html页面加载顺序 1,用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2,浏览器开始载入html代码,发现<head>标签内 ...
随机推荐
- Spring 通过XML配置文件以及通过注解形式来AOP 来实现前置,环绕,异常通知,返回后通知,后通知
本节主要内容: 一.Spring 通过XML配置文件形式来AOP 来实现前置,环绕,异常通知 1. Spring AOP 前置通知 XML配置使用案例 2. Spring AOP ...
- Raphael实现商品来源去向图
数据可视化 是很多大数据分析的一项重要工作,甚至有专门的团队做这项工作.Web上的各种图形(饼状图,柱状图等)一直被flash所垄断,随着HTML5的发展,SVG和Canvas也逐渐走上舞台.这不,产 ...
- 一. Linux 常用命令总结
1. linux 基础命令 who, which, basename, dirname, echo, type, hash, whatis, makewhatis, man, info, help, ...
- R语言与数据分析
K最近邻(k-Nearest Neighbor,KNN)分类算法 R语言实现包:R语言中有kknn package实现了weighted k-nearest neighbor. 决策树: R语言实现决 ...
- java charset detector
https://code.google.com/p/juniversalchardet/downloads/list java移植mozilla的编码自动检测库(源码为c++),准确率高. 通过svn ...
- FileInputFormat
MapReduce框架要处理数据的文件类型 FileInputFormat这个类决定. TextInputFormat是框架默认的文件类型,可以处理Text文件类型,如果你要处理的文件类型不是Text ...
- jmeter的使用(一)
1.下载jmeter:http://jmeter.apache.org/download_jmeter.cgi 2.启动jmeter,打开jmeter.bat 3.添加线程组 4.添加http请求 5 ...
- Android系列之UI组件----Menu菜单
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- NGUI:HUD Text(头顶伤害漂浮文字)
HUD Text 很早之前就有闻于NGUI中的HUD Text插件,今天得以尝试,看了会儿官方的文档,楞是没给看明白,官方的ReadMe.txt写的使用方法如下: 官网Usage 1. Attach ...
- javascript中的栈结构
1.栈的定义 栈是一种和列表类似的数据结构,可以用它来解决很多的编程问题,栈是一种高效的数据结构,因为数据只能在栈的顶端添加或者删除,所以这样的操作很快而且容易实现. 栈是一种特殊的列表,站内的元素只 ...