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库的最佳方法详细说明及实现代码
Dec 28 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
JS函数重载的解决方案
May 13 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
实现图片预加载的三大方法及优缺点分析
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 高级课程笔记 面向对象
2009/06/21 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
设定php简写功能的方法
2019/11/28 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
json数据的列循环示例
2013/09/06 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Tensorflow累加的实现案例
2020/02/05 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
python绘制雷达图实例讲解
2021/01/03 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
中专毕业生的自荐书
2014/07/01 职场文书
公民授权委托书
2014/10/15 职场文书
成本会计实训报告
2014/11/05 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python