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查询DBpedia小应用实例学习
Mar 07 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
实现图片预加载的三大方法及优缺点分析
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 cout<<的一点看法
2010/01/24 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
PHP7 新增常量
2021/03/09 PHP
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
openLayer4实现动态改变标注图标
2020/08/17 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
matplotlib绘图实例演示标记路径
2018/01/23 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python实现简易内存监控
2018/06/21 Python
Python补齐字符串长度的实例
2018/11/15 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
购买一个高级域名:BuyDomains
2018/03/11 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
小学防溺水制度
2014/01/29 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2016入党心得体会范文
2016/01/06 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis