jQuery使用ajax_动力节点Java学院整理


Posted in jQuery onJuly 05, 2017

用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代码,并且状态和错误处理写起来很麻烦。

用jQuery的相关对象来处理AJAX,不但不需要考虑浏览器问题,代码也能大大简化。

ajax

jQuery在全局对象jQuery(也就是$)绑定了ajax()函数,可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象,常用的选项如下:

async:是否异步执行AJAX请求,默认为true,千万不要指定为false
method:发送的Method,缺省为'GET',可指定'POST'、'PUT'等;
contentType:发送POST请求的格式,默认值为'application/x-www-form-urlencoded; charset=UTF-8',也可以指定为text/plain、application/json
data:发送的数据,可以是字符串、数组或object。如果是GET请求,data将被转换成query附加到URL上,如果是POST请求,根据contentType把data序列化成合适的格式;
headers:发送的额外的HTTP头,必须是一个object;
dataType:接收的数据格式,可以指定为'html'、'xml'、'json'、'text'等,缺省情况下根据响应的Content-Type猜测。

下面的例子发送一个GET请求,并返回一个JSON格式的数据:

var jqxhr = $.ajax('/api/categories', {
  dataType: 'json'
});
// 请求已经发送了

不过,如何用回调函数处理返回的数据和出错时的响应呢?

还记得Promise对象吗?jQuery的jqXHR对象类似一个Promise对象,我们可以用链式写法来处理各种回调:

'use strict';

function ajaxLog(s) {
  var txt = $('#test-response-text');
  txt.val(txt.val() + '\n' + s);
}

$('#test-response-text').val('');
var jqxhr = $.ajax('/api/categories', {
  dataType: 'json'
}).done(function (data) {
  ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
  ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
  ajaxLog('请求完成: 无论成功或失败都会调用');
});

get

对常用的AJAX操作,jQuery提供了一些辅助方法。由于GET请求最常见,所以jQuery提供了get()方法,可以这么写:

var jqxhr = $.get('/path/to/resource', {
  name: 'Bob Lee',
  check: 1
});

第二个参数如果是object,jQuery自动把它变成query string然后加到URL后面,实际的URL是:

/path/to/resource?name=Bob%20Lee&check=1

这样我们就不用关心如何用URL编码并构造一个query string了。

post

post()get()类似,但是传入的第二个参数默认被序列化为application/x-www-form-urlencoded

var jqxhr = $.post('/path/to/resource', {
  name: 'Bob Lee',
  check: 1
});

实际构造的数据name=Bob%20Lee&check=1作为POST的body被发送。

getJSON

由于JSON用得越来越普遍,所以jQuery也提供了getJSON()方法来快速通过GET获取一个JSON对象:

var jqxhr = $.getJSON('/path/to/resource', {
  name: 'Bob Lee',
  check: 1
}).done(function (data) {
  // data已经被解析为JSON对象了
});

安全限制

jQuery的AJAX完全封装的是JavaScript的AJAX操作,所以它的安全限制和前面讲的用JavaScript写AJAX完全一样。
如果需要使用JSONP,可以在ajax()中设置jsonp: 'callback',让jQuery实现JSONP跨域加载数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
jquery插件实现悬浮的菜单
Apr 24 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 #jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 #jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 #jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
jquery拖动改变div大小
Jul 04 #jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
You might like
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python打包成so文件过程解析
2019/09/28 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python有几个版本
2020/06/17 Python
python如何进入交互模式
2020/07/06 Python
python利用线程实现多任务
2020/09/18 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
html5使用canvas画一条线
2014/12/15 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
给民警的表扬信
2014/01/08 职场文书
网络信息安全承诺书
2014/03/26 职场文书
中药学自荐信
2014/06/15 职场文书
民间借贷协议书范本
2014/10/01 职场文书
红旗渠导游词
2015/02/09 职场文书
演讲开场白台词大全
2015/05/29 职场文书
Mysql Show Profile
2021/04/05 MySQL
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android