前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery的ajax详解

jQuery的ajax详解

作者头像
老马
发布2018-07-31 14:36:13
2.3K0
发布2018-07-31 14:36:13
举报
文章被收录于专栏:老马寒门IT

jQuery内部也封装了对原生ajax请求的方法,可以很方便我们的对后台异步请求处理。

$.get()方法

语法:jQuery.get( url [, data ] [, success ] [, dataType ] )

  • url 请求的后台地址
  • data 传递的参数
  • success 成功的回调, function(PlainObject data, String textStatus, jqXHR jqXHR )
  • dataType 预期后台返回数据的类型,默认会自动智能判断(xml, json, script, text, html)
代码语言:javascript
复制
$.get('/user.json', function(data) {
  console.log(data);
});

$.get('/user.json', 'id=1', function (data, status, jsXHR) {
  console.log(data.id);
}, 'json');

$.post()方法

语法: jQuery.post( url [, data ] [, success ] [, dataType ] )

用法跟get基本一致。列子:

代码语言:javascript
复制
$.post('/api/user', {id: 3, name: 234}, function(data, status, jsXHR) {
  console.log(data);
});

$.ajax()方法

语法1: jQuery.ajax( [settings ] )

settings 是一个普通的对象。可以有如下设置:

  • async 类型:Boolean

默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。

注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

  • beforeSend(XHR) 类型:Function

发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

  • cache 类型:Boolean

默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

  • contentType 类型:String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

  • data 类型:String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

  • dataType 类型:String 预期服务器返回的数据类型。 (xml、html、script、json、jsonp、text)。jq会将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。
  • error 类型:Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

  • success 类型:Function

请求成功后的回调函数。

参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

这是一个 Ajax 事件。

  • type 类型:String

默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

  • url 类型:String

默认值: 当前页地址。发送请求的地址。

  • jsonp 类型:String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

  • jsonpCallback 类型:String

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。

语法2:jQuery.ajax( url [, settings ] )

代码语言:javascript
复制
$.ajax({
  url: 'user.json',
  data: 'id=3',
  type: 'GET',
  success: function(data) {
    console.log(data);
  }
});

$.getJSON()

语法: jQuery.getJSON( url [, data ] [, success ] )

用法类似于get,但是返回的数据类型自动转换为json对象。

此方法,支持JSONP的调用。如果url中包含了callback=?或者后台要求的callback参数,那么此方法自动转换成jsonp的调用模式。

代码语言:javascript
复制
$.getJSON('user.json', function(data) {
  console.log(data.id);
});

jQuery.getScript()方法

执行后台的请求,并下载js脚本,下载完成后,自动执行。 语法: jQuery.getScript( url [, success ] )

代码语言:javascript
复制
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

load()方法

从后台下载html内容,下载完成后替换到选择元素的内部。

语法:$(selector).load( url [, data ] [, complete ] )

代码语言:javascript
复制
$('.box').load('/user/list', {}, function(data) {});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-06-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • $.get()方法
  • $.post()方法
  • $.ajax()方法
  • $.getJSON()
  • jQuery.getScript()方法
  • load()方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档