JQuery 和 Ajax

#编程语言/前端

1 原理

  • Ajax（阿甲克斯）提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
  • jQuery 是一个框架（可以当成一个库），封装了一些常用方法，使得 JS 与 Ajax 更方便使用。

2 JQuery

JQuery 是一个非常常用的 JS 库，可以直接使用网上的 js，也可以下载到自己的服务端。

2.1.1 直接下载

下载地址：https://jquery.com/download/

点开不压缩版本，即可看到其具体实现，将 js 文件保存到本地，然后在网页中引入即可

1
<script src="pathtoyourjs/jquery-3.2.1.min.js"></script>

2.1.2 下载源码（可切换到历史版本）

或者从 git 下载

1
$ git clone https://github.com/jquery/jquery.git

2.2 AJAX

AJAX 是 JQuery 工具集中的一个工具，用于远程请求，以实现局部刷新。

3 示例

3.1 示例一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script>
	$(document).ready(function(){
		$("button").click(function(){
			$.ajax({url:"demo_test.html",
					data: { name: "John", time: "2pm" },
					success:function(result){
				$("#div1").html(result);
			}});
		});
	});
	</script>
</head>
<body>
	<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
	<button>获取其他内容</button>
</body>
</html>

4 常用方法

  • javascrippt 中$(function()
    • 这是 JQuery 语法，$ 表示 JQuery 对象。$(function() 表示当页面加载完毕时执行这个函数。

5 参考

JavaScript，jQuery与Ajax的关系

jQuery ajax() 方法

jQuery - AJAX get() 和 post() 方法