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学习笔记8 用JSON做原型
Jan 11 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
json 实例详细说明教程
2009/10/31 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
Python random模块常用方法
2014/11/03 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python计算一个文件里字数的方法
2015/06/15 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python线程信号量semaphore使用解析
2019/11/30 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
一套软件测试笔试题
2014/07/25 面试题
中文专业毕业生自荐信
2013/10/28 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js