深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问题,更幸福的是你的js代码将大大地简化,看完本文,你会发现,ajax,简单的来讲就是一句话的事情。

本文重点是来讲讲jQuery中调用ajax的4种方法:$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识,或者没有ajax的概念,那么请先去问问google老大,再来读本文。

1、$.get

$.get()方法使用GET方式来进行异步请求,它的语法结构为:

$.get( url [, data] [, callback] )

解释一下这个函数的各个参数:

url:string类型,ajax请求的地址。

data:可选参数,object类型,发送至服务器的key/value数据会作为QueryString附加到请求URL中。

callback:可选参数,function类型,当ajax返回成功时自动调用该函数。

最后写一个$.get()的实例供大家参考:


1

2

3

4

5

6

7

8

9

10

11

$.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()的实例供大家参考:


1

2

3

4

5

6

7

8

9

10

11

12

$.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调用的具体参数,这里我把最常用的几个参数附上


1

2

3

4

5

6

7

8

9

10

11

12

13

14

$.ajax({

        url: ‘submit.aspx‘,

        datatype: "json",

        type: ‘post‘,

        success: function (e) {   //成功后回调

            alert(e);

        },

        error: function(e){    //失败后回调

            alert(e);

        },

        beforeSend: function(){  /发送请求前调用,可以放一些"正在加载"之类额话

            alert("正在加载");

        }

})

好了,以上就是jquery实现ajax调用的几种方法,希望对大家有所帮助。

http://www.cnblogs.com/ranzige/p/jquery_get_ajax.html

时间: 2024-10-14 18:05:46

深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法的相关文章

理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

ajax的4种方法:$.get.$.post.$getJSON.$ajax. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] [, callback] ) url:string类型,ajax请求的地址. data:可选参数,object类型,发送至服务器的key/value数据会作为QueryString附加到请求URL中. callback:可选参数,function类型,当ajax返回成功时自动调用该函数. 例: $.

理解jquery的$.extend()、$.fn和$.fn.extend()

jQuery.fn jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//-. //-- }; 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦. 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1″) 会生成一个 jQuery类的实例. jQuery.ext

深入理解jQuery、Angular、node中的Promise

最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供基础功能.在用jQuery操作DOM的时候对Promise的使用欲不够强烈,最近学习node和Angular,需要用js写业务逻辑和数据操作代码的时候这种场景需求就出来了.一般来说事件适合在交互场景中运用,因为用户的行为本来就是分散的,而promise这样的流程控制适合在后台逻辑中处理业务. //j

jQuery的get()post()getJson()方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据. HTTP 请求:GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST. GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得(取回)数据.注释:GET 方法可能返回缓存数据. POST 也可用于从服务器获取数据.不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据. 1.j

jquery中的$(this)和this

在jquery中,存在$(this)和this. 其中常见的是出现在事件处理函数中. 首先先来理解jquery对象. jquery对象其实就是DOM对象的集合. 比如:$('a')[0];---------这是DOM对象. $('a') ----------这是jquery对象. 所以jquery事件处理函数中的this指的是DOM对象. 对与prop能取到值的属性,均用this.id这样取值的话速度快一点. 因为$(this)===new jQuery(this);需要创建一个jquery对象

三元表达式之理解/jquery源码分析之$.inArray实现

每次看到三元表达式就会惶惶然分不清如何读,正如语文中的断句一样,jquery源码中的三元表达式更是不知如何断句. 附jquery中的inArray实现. 大家熟悉jquery的应该都不陌生inArray的用法.在源码实现中,先判断了arr是否存在,如果不存在,则可直接返回-1,否则进行后续判断,当存在indexOf方法时,则直接使用call来调用indexOf方法. 否则继续. 在jquery代码中处处体现代码构建者对于javascript的深刻理解,譬如这里对arr.length的缓存,接下来

理解jquery的.on()方法

jquery在的.on()方法用来给元素绑定事件处理函数的,我经常用在两个地方: 给未来的元素绑定事件:我总是这样用:$(document).on('click','#div1',function(){}); 给拥有同一个父元素的多个子元素绑定事件. 可以查看以前写的博客:jQuery中对未来的元素绑定事件 先来看一个实例: 在页面A的一个div里动态加载页面B,页面B里的一个div绑定了一个单击事件. 页面A如下: <body> <input type="button&quo

深入理解jQuery中的Deferred

引入 1  在开发的过程中,我们经常遇到某些耗时很长的javascript操作,并且伴随着大量的异步. 2  比如我们有一个ajax的操作,这个ajax从发出请求到接收响应需要5秒,在这5秒内我们可以运行其他代码段,当响应到达后,我们需要判断响应的结果(无非就是成功或者失败),并根据不同的结果  添加回调函数. 3  为了有效的简洁的添加回调函数jQuery引入了Callbacks. 4  而为了方便的 根据不同的结果(或者根据各种跟结果有关的逻辑,比如不管是成功或者失败) 添加回调函数,jQu

JSONP原理及jQuery中的使用

JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息. JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON). JSON是一种数据格式,JSONP是一种数据调用方式. 1 //JSON 2 3 { 4 5 “name”: “sb” 6 7 } 1 //JSONP 2 3 callback({ 4 5 “name”: “sb” 6 7 }