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 相关文章推荐
原生javascript实现图片轮播效果代码
Sep 03 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
vue.js学习之递归组件
Dec 13 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
vue 实现微信浮标效果
Sep 01 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
详解Bootstrap插件
2016/04/25 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python strip()函数 介绍
2013/05/24 Python
Ubuntu下安装PyV8
2016/03/13 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
你对IPv6了解程度
2016/02/09 面试题
介绍一下grep命令的使用
2015/06/12 面试题
工艺工程师工作职责
2013/11/23 职场文书
中国入世承诺
2014/04/01 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
委托书格式
2014/08/01 职场文书
法人委托书的范本格式
2014/09/11 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
荒岛余生观后感
2015/06/09 职场文书
酒店厨房管理制度
2015/08/06 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
python 镜像环境搭建总结
2022/09/23 Python