`

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

 
阅读更多
本文重点是来讲讲jQuery中调用ajax的4种方法:$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识,或者没有ajax的概念,那么请先去问问度娘,再来读本文。
当我们用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调用还是挺复杂的,希望本文能对大家有所帮助,如有什么疑问,也可以联系我,大家共同进步
分享到:
评论

相关推荐

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

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

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

    ### jQuery $.post() 方法详解与 JSON 数据交互 在现代 Web 开发中,客户端与服务器端的数据交换是非常重要的一个环节。jQuery 提供了多种 AJAX 方法来简化这一过程,其中 `$.post()` 是一种常用的方式来实现客户端...

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

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

    Jquery $when done then的用法详解

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

    Jquery中$.ajax()方法参数详解

    下面,我们将详细介绍$.ajax()方法的各个参数以及它们的作用和用法。 1. url:这是一个字符串类型,指定了发送请求的地址,也就是数据要发送到服务器的哪个URL。如果不指定,通常默认为当前页面地址。URL是AJAX请求...

    JQ中$.ajax()方法详解

    ### JQ中$.ajax()方法详解 在前端开发领域,jQuery因其简洁易用而深受开发者喜爱。其中,`$.ajax()`方法是实现异步数据请求的核心功能之一,它简化了与服务器交互的过程,使得前端页面无需刷新即可更新数据或状态。...

    jQuery中Ajax的get、post等方法详解.docx

    本文主要解析jQuery中的$.get()、$.post()等方法,以及相关的$.getScript()和$.getJSON()方法。 首先,$.get()方法是使用HTTP GET请求方式向服务器获取数据。其基本语法如下: ```javascript $.get(url, data, ...

    jQuery中Ajax的get、post等方法详解.pdf

    本文主要解析jQuery中的$.get()、$.post()等Ajax方法,以及相关的$.getScript()和$.getJSON()方法。 首先,$.get()方法是使用GET方式发送异步请求,基本语法如下: ```javascript $.get(url, data, callback, type...

    $.ajax()方法详解

    使用$.ajax()方法时,可以结合jQuery的其他功能,如`.done()`、`.fail()`、`.always()`等,来处理请求的成功、失败和完成情况。同时,可以通过`$.ajaxSetup()`来设置全局的默认选项。 总的来说,$.ajax()方法是...

    jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

    以上就是关于 jQuery AJAX 的实例详解,包括 $.ajax, $.post 和 $.get 的使用方法以及一些实际应用场景。通过这些方法,我们可以轻松地在客户端与服务器之间进行数据交互,实现页面的无刷新更新。

    使用$.Ajax调用后台.aspx

    $.ajax是jQuery库中的一个核心方法,它允许我们执行HTTP请求,如GET和POST,与服务器进行通信。此方法支持JSON、XML、HTML等多种数据格式,同时具备错误处理、缓存控制等特性。 二、基本使用 $.ajax的基本语法如下...

    JQuery中$.ajax()方法参数详解及应用

    在JQuery众多功能中,$.ajax()方法是实现Ajax请求的重要方法。通过$.ajax(),开发者可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。本文将详细介绍$.ajax()方法的各个参数以及如何应用。 ...

    jQuery-ajax.rar_jquery

    除了$.ajax(),jQuery还提供了简化的$.get(), $.post(),以及用于获取和更新HTML片段的$.load(), $.html()等方法。例如,$.get()用于GET请求: ```javascript $.get('http://example.com/api/data', function...

    jQuery1.12.4+jQuery中文手册.rar

    `$.getJSON()`则专门用于获取JSON数据。 6. **链式操作**:jQuery的所有方法都会返回jQuery对象,这使得我们可以连续调用多个方法,如`$(selector).css("color", "red").fadeIn(500)`。 **学习与应用** - 开发时...

    详解jquery中$.ajax方法提交表单

    在提交表单的场景中,我们通常使用POST方法来提交数据到服务器,而$.ajax方法正是为此场景设计的。 在$.ajax方法中,可以指定一个回调函数,以便在请求成功完成时执行。这可以通过在$.ajax方法中使用success属性来...

    jQuery-AJAX.zip_jquery ajax

    4. `$.getJSON()`: 专门用于获取JSON格式的数据,通常用于从服务器获取结构化数据。 5. `$.load()`: 用于从服务器加载HTML片段,并将其插入到页面的指定元素中。 三、AJAX基本工作原理 AJAX通过创建...

    $.ajax()方法参数详解

    $.ajax()方法是jQuery库中的一个核心功能,用于在后台与服务器进行异步数据交互,无需刷新页面。熟练掌握$.ajax()的参数设置对于前端开发至关重要。以下是对这些参数的详细解释: 1. **url**: 这是一个String类型的...

Global site tag (gtag.js) - Google Analytics