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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
如何编写jquery插件
Mar 29 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery无冲突模式详解
Jan 17 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利用反射实现插件机制的方法
2015/03/14 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
Python获取任意xml节点值的方法
2015/05/05 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
django页面跳转问题及注意事项
2019/07/18 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python pip配置国内源的方法
2020/02/14 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
教师岗位职责
2013/11/17 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
保护环境的建议书
2014/03/12 职场文书
汉字听写大会观后感
2015/06/12 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python