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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
JS中操作JSON总结
Dec 06 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 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
laravel 4安装及入门图文教程
2014/10/29 PHP
javascript事件问题
2009/09/05 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
javascript控制台详解
2015/06/25 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
js实现表格数据搜索
2020/08/09 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
Python中的流程控制详解
2021/02/18 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
关于孝道的演讲稿
2014/05/21 职场文书
商场租赁意向书
2014/07/30 职场文书
实习工作表现评语
2014/12/31 职场文书
离职信范文
2015/06/23 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers