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 位置插件
Dec 25 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
微信小程序实现日历小功能
Nov 18 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
js身份证验证超强脚本
2008/10/26 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
JS实现打字游戏
2019/12/17 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
校园招聘策划书
2014/01/09 职场文书
秋季运动会稿件
2014/01/30 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
mysql函数全面总结
2021/11/11 MySQL