系统学习 jQuery （五） AJAX

最新推荐文章于 2021-08-05 16:59:03 发布

Mir2

最新推荐文章于 2021-08-05 16:59:03 发布

阅读量445

点赞数 1

分类专栏： JavaScript 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/zaqwsx20/article/details/75656496

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

AJAX 简单来说就是通过 http 请求加载远程数据。jQuery 提供了方便统一的 AJAX API 以解决浏览器兼容问题。

常用 ajax 函数

$.ajax(url, [setting]) jQuery 底层 ajax 函数，通过 setting 可以灵活地配置 ajax 请求和回调。但多数情况下都不需要使用这个方法一项项配置，可以用 jQuery 提供地辅助函数完成常见任务。
load(url, [data], [cb]) 加载远程数据并添加到节点中，url 是请求地址，默认发送 GET 请求，若设置了请求参数 data 则发送 POST 请求。
$.get(url, [data], [cb], [type]) 发送 GET 请求，url 是请求地址，data 是附加参数，可以是 url 参数字符串也可以是对象，type 描述返回内容的格式可以是 xml, html, script, json, text, _default，cb 请求成功后的回调函数，加载的数据通过参数传给 cb。例如 $.get('getData.php', {id:1}, function(data){console.log(data)})
$.getJSON(url, [data], [cb]) 发 GET 获得一个 JSON 数据。
$.getScript(url, [cb]) 发 GET 请求来加入一个 javascript。
$.post(url, [data], [cb], [type]) 与 $.get 类似，只是发 POST 请求。
ajaxStart(cb) 注册一个全局的 ajax 开始回调，即任何 ajax 请求开始时都会调用这个函数（注意 jQuery1.8 全局 ajax 回调只能作用在 document 对象上）。
ajaxComplete(cb) 注册一个全局的 ajax 完成回调，即任何 ajax 请求完成都会调用这个回调（注意 jQuery1.8 全局 ajax 回调只能作用在 document 对象上）。
例如想在任何 ajax 加载时都显示一个 loading 动画可以写 $(document).ajaxStart(function() {playLoadingAnima();}).ajaxComplete(function() {stopLoadingAnima();})
$.ajaxSetup(options) 设置 ajax 请求的默认设置。即修改 $.ajax 函数设置的默认值。
例如想在所有 ajax 请求头上都加上 token 信息可以调用 $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
serialize(form) 将表单序列化为字符串，即 url 参数形式，例如 name1=val1&name2=val2。
serializeArray(form) 将表单序列化为数组，数组每一项都是 {name: '', value: ''} 形式的对象。例如 [{name: 'name1', value: 'value1'}, {name: 'name2', value: 'value2'}]
例如想通过 ajax 以 POST 方式提交一个表单可以写：$.post('form.php', $('#form').serialize());

延迟对象

$.ajax $.get 等发送 ajax 请求的函数都会返回一个延迟对象，除了在发送请求时设置回调函数外也可以通过延迟对象来设置回调函数。
def.done(cb) 添加延迟成功时的回调
def.fail(cb) 添加延迟失败时的回调
def.progress(cb) 添加延迟进度时的回调
def.always(cb) 添加延迟完成时的回调（不管成功或失败都调用）
例如为 get 请求添加成功回调也可以写 $.get('getData.php').done(function(data) {console.log(data);});
延迟对象是对延迟完成的任务的一种抽象，除了用于 ajax 请求外也可以用来表达任何需要延迟完成的任务，例如本地测试时可以构造一个延迟对象来模拟网络请求，通过 setTimeout 来让它在一段时间后完成。
jQuery 提供了一个工具函数 $.when(def1, def2, ...) 来将多个延迟对象结合成一个延迟对象，这样方便我们等待多个 ajax 请求加载完成后再执行回调。
例如 $.when($.get('getData1.php'), $.get('getData2.php'), $.get('getData3.php')).done(function(args1, args2, args3) {console.log('三个请求都加载完了')});

延迟对象和 AJAX 的更多用法请参考 jQuery API http://jquery.cuishifeng.cn/deferred.done.html

示例：AJAX 异步提交表单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/jquery-1.11.2/jquery.js"></script>
</head>
<body>
<form id="form" action="javascript: submit();" method="GET">
<p><input name="name1" type="text"></p>
<p><input name="name2" type="text"></p>
<p><input type="submit"></p>
</form>
<div id="content"></div>
<script>
function submit() {
	$.post('form.php', $('#form').serialize(), function(data) {
		$('#content').html(data);
	})
}
</script>
</body>
</html>

Mir2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
系统学习 jQuery （五） AJAX

ajax 简单来说就是通过 http 请求加载远程数据。jQuery 提供了方便统一的 ajax API 以解决浏览器兼容问题。常用 ajax 函数$.ajax(url, [setting]) jQuery 底层 ajax 函数，通过 setting 可以灵活地配置 ajax 请求和回调。但多数情况下都不需要使用这个方法一项项配置，可以用 jQuery 提供地辅助函数完成常见任务loa
复制链接

扫一扫