`
liujiawinds
  • 浏览: 136954 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

[转载] 深入理解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.itivy.com/jquery/archive/2011/7/6/jquery-get-post-getjson-ajax.html

分享到:
评论

相关推荐

    详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

    而Jquery库提供了一系列封装好的Ajax函数,如$.get(), $.post(), $.ajax(), 和$.getJSON(),这些函数简化了前端开发者与后端数据交互的过程。 ### 1. $.get() `$.get()`函数是最简单的一种异步请求方式,它发送一...

    解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域

    本篇将详细介绍如何解决jQuery跨域问题,涉及的方法包括$.get、$.post和$.getJSON等。 首先,我们需要理解什么是跨域。同源策略是浏览器为保障安全而实施的一项机制,它规定JavaScript只能访问与当前页面同源(协议...

    asp+ajax(jQuery)实例($.ajax()、$.post()、$.get()、$.getJSON()四种模式可选)

    asp+ajax(jQuery)实例($.ajax()、$.post()、$.get()、$.getJSON()四种模式可选 Ajax是目前比较流行的网站建设技术,尤其作为网站建设者来说,掌握它十分有必要,如果用原生Javascript开发则比较困难,还好有强大的...

    Jquery中$.getScript()$.getJSON

    在jQuery库中,`$.getScript()`和`$.getJSON()`是两种非常实用的异步数据获取方法,它们分别用于加载JavaScript脚本和获取JSON格式的数据。这些方法都是基于jQuery的`$.ajax()`基础构建的,提供了更为简洁和方便的...

    jquery 异步调用$.ajax() $.post() $.get()

    本篇文章将深入探讨jQuery中的异步调用方法,包括`$.ajax()`,`$.post()`和`$.get()`,以及它们在实际开发中的应用。 首先,`$.ajax()`是jQuery提供的最强大的异步数据请求函数,它支持多种HTTP请求方法,如GET、...

    jquery $.post()的用法 传递json文本 客户端和服务器端相互传递

    本文将详细探讨 `$.post()` 的使用方法,特别是在传递 JSON 数据时的应用。 #### 一、`$.post()` 基础介绍 `$.post()` 是 jQuery 提供的一个用于发起 POST 请求的方法,它的基本语法如下: ```javascript $.post...

    学习jQuery中的Ajax——$.get()方法

    结合其他jQuery的Ajax方法,如`$.post()`和`$.getJSON()`,我们可以构建出功能丰富的、用户体验良好的Web应用。在实际开发中,理解并熟练运用这些工具至关重要,以便更好地优化和提升我们的项目。

    jQuery+get/post+Ajax+Json

    1. jQuery的$.get和$.post方法:这两种方法是jQuery提供的Ajax(异步JavaScript和XML)接口,用于与服务器进行非刷新的数据交换。$.get用于发送GET请求,而$.post用于发送POST请求。它们都接受四个参数:URL、数据、...

    jQuery中$.ajax()和$.getJson()同步处理详解

    在jQuery中,$.ajax()和$.getJSON()是两种常见的用于发送Ajax请求的方法,它们主要用于与服务器进行异步数据交互。然而,在某些特定场景下,如处理表单提交前的验证,可能需要同步处理请求,确保数据正确无误后再...

    详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())

    接下来,我们将详细介绍jQuery中各种AJAX函数,包括$.get()、$.post()、$.ajax()和$.getJSON()。 首先,$.get()方法是一种简单实现GET请求的方式。它的语法是$.get(url, [data], [callback])。其中url参数代表请求...

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    在jQuery中,有四种主要的Ajax方法用于与服务器进行异步数据交互,它们分别是$.get(), $.post(), $.ajax()和$.getJSON()。这些方法简化了JavaScript中的Ajax操作,使得开发者能够更加便捷地处理数据交互。 1. **$....

    jQuery的3种请求方式$.post,$.get,$.getJSON

    在jQuery库中,$.post, $.get和$.getJSON是用于执行AJAX(Asynchronous JavaScript and XML)请求的三种主要方法,这些方法使得前端与后端服务器进行异步数据交互成为可能,无需刷新整个页面。接下来,我们将详细...

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

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

    jQuery Ajax之$.get()方法和$.post()方法

    在jQuery库中,$.get()和$.post()是两种非常常用的Ajax请求方法,它们用于向服务器发送异步请求,获取或提交数据,而无需刷新整个页面。这些方法都是全局函数,与jQuery对象的方法如.load()有所不同,后者是对特定...

    Jquery $when done then的用法详解

    对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when…done…fail…then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下面的$.ajax写法,看起来很乱 $.ajax({ url...

    jqueryajax的$post和$get方法共3页.pd

    在学习jQuery的AJAX操作时,理解`$.post()`和`$.get()`的基本用法是至关重要的,这将帮助开发者快速实现前后端数据交互,提高网页的动态性和用户体验。通过实践和不断探索,开发者可以更好地掌握这些方法,并将其...

Global site tag (gtag.js) - Google Analytics