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 可排列的表实现代码
Nov 13 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
详解vue高级特性
Jun 09 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开发GUI
2006/10/09 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
JS判断数组那点事
2017/10/10 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Django admin组件的使用
2020/10/24 Python
python 操作excel表格的方法
2020/12/05 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
幽默导游词开场白
2015/05/29 职场文书
千手观音观后感
2015/06/03 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫
vue动态绑定style样式
2022/04/20 Vue.js
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS