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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
js版本A*寻路算法
2006/12/22 Javascript
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
Python 字符串池化的前提
2020/07/03 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
残疾人创业典型事迹
2014/02/01 职场文书
学校师德师风整改措施
2014/10/27 职场文书
教师个人年终总结
2015/02/11 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android