jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解


Posted in Javascript onNovember 19, 2014

当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问题,更幸福的是你的js代码将大大地简化,看完本文,你会发现,ajax,简单的来讲就是一句话的事情。

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。

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调用的几种方法,ajax调用还是挺复杂的,希望本文能对大家有所帮助,如有什么疑问,也可以联系我,大家共同进步。

Javascript 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 #Javascript
jQuery Ajax()方法使用指南
Nov 19 #Javascript
javascript匿名函数实例分析
Nov 18 #Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 #Javascript
删除Javascript Object中间的key
Nov 18 #Javascript
如何在MVC应用程序中使用Jquery
Nov 17 #Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 #Javascript
You might like
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php session应用实例 登录验证
2009/03/16 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
python getopt 参数处理小示例
2009/06/09 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
numpy基础教程之np.linalg
2019/02/12 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Django中的AutoField字段使用
2020/05/18 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python