Ajax 与 jQuery 操作 Ajax 的语法知识点及案例代码
本文将详细介绍 Ajax（Asynchronous JavaScript and XML）技术，涵盖其基本概念、常用的 Ajax 方法、数据格式（XML 和 JSON），以及如何使用 jQuery 操作 Ajax。
什么是 Ajax
Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它允许在不重新加载整个页面的情况下，与服务器进行异步通信，更新部分网页内容。
主要特点：
- 异步性：无需等待服务器响应即可继续执行其他操作。
- 部分更新：只更新网页的特定部分，而不是整个页面。
- 提高用户体验：减少页面刷新次数，提高响应速度。
Ajax 的工作原理
Ajax 的核心是 XMLHttpRequest 对象，它允许客户端脚本发送 HTTP 请求并接收 HTTP 响应。流程如下：
- 创建 XMLHttpRequest 对象。
- 配置请求：设置请求方法（GET、POST 等）、URL 和其他参数。
- 发送请求。
- 处理响应：通过回调函数处理服务器返回的数据。
Ajax 的优点
- 提升用户体验：无需刷新整个页面，响应更快。
- 减少带宽使用：只传输必要的数据。
- 提高性能：异步处理不阻塞主线程。
- 支持多种数据格式：如 XML、JSON、HTML 等。
常用的 Ajax 方法
1. XMLHttpRequest
传统的 Ajax 实现方式，使用 JavaScript 原生对象。
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
2. jQuery Ajax 方法
jQuery 提供了简化的 Ajax 方法，简化了跨浏览器兼容性问题。
$.ajax()$.get()$.post()$.getJSON()load()
数据格式：XML 与 JSON
XML（eXtensible Markup Language）
- 结构化数据：使用标签定义数据结构和内容。
- 可扩展性：自定义标签，适应不同需求。
- 缺点：相对冗长，解析较复杂。
示例：
<user>
<id>1</id>
<name>张三</name>
<email>zhangsan@example.com</email>
</user>
JSON（JavaScript Object Notation）
- 轻量级：简洁、易读、易解析。
- 广泛支持：现代编程语言和框架普遍支持。
- 高效传输：数据量小，传输速度快。
示例：
{
"id": 1,
"name": "张三",
"email": "zhangsan@example.com"
}
使用 jQuery 操作 Ajax
jQuery Ajax 方法
1. $.ajax()
最通用的 Ajax 方法，支持丰富的配置选项。
语法：
$.ajax({
url: 'https://example.com/api',
type: 'GET', // 或 'POST'
data: { key1: 'value1', key2: 'value2' },
dataType: 'json', // 预期服务器返回的数据类型
success: function(response) {
// 处理成功响应
},
error: function(xhr, status, error) {
// 处理错误
}
});
2. $.get()
简化的 GET 请求方法。
语法：
$.get('https://example.com/api', { key: 'value' }, function(data) {
// 处理响应数据
}, 'json');
3. $.post()
简化的 POST 请求方法。
语法：
$.post('https://example.com/api', { key: 'value' }, function(data) {
// 处理响应数据
}, 'json');
4. $.getJSON()
专门用于获取 JSON 数据的 GET 请求。
语法：
$.getJSON('https://example.com/api', { key: 'value' }, function(data) {
// 处理 JSON 数据
});
案例一：用户登录
功能描述：
用户输入用户名和密码，提交表单后，通过 Ajax 向服务器发送登录请求。服务器返回登录结果，页面根据结果进行相应提示。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<label>用户名:</label>
<input type="text" id="username" name="username" required /><br /><br />
<label>密码:</label>
<input type="password" id="password" name="password" required /><br /><br />
<button type="submit">登录</button>
</form>
<div id="message"></div>
<script src="login.js"></script>
</body>
</html>
JavaScript（login.js）代码：
$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: '/api/login', // 服务器端登录接口
type: 'POST',
data: JSON.stringify({ username: username, password: password }),
contentType: 'application/json',
dataType: 'json',
success: function(response) {
if (response.success) {
$('#message').html('<p style="color: green;">登录成功！</p>');
// 可以重定向到其他页面
window.location.href = '/dashboard';
} else {
$('#message').html('<p style="color: red;">登录失败，请检查用户名和密码。</p>');
}
},
error: function(xhr, status, error) {
$('#message').html('<p style="color: red;">发生错误，请稍后再试。</p>');
console.error('Error:', error);
}
});
});
});
说明：
- 表单提交事件拦截：通过
submit事件拦截表单提交，使用 Ajax 发送数据。 - 数据序列化：将用户名和密码序列化为 JSON 格式。
- 服务器响应处理：根据服务器返回的
success字段判断登录是否成功，并显示相应消息。 - 错误处理：处理网络错误或服务器错误。
案例二：用户信息列表
功能描述：
从服务器获取用户信息列表，并通过 Ajax 显示在页面上。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>用户信息列表</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
table {
width: 50%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h2>用户信息列表</h2>
<table id="userTable">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<!-- 用户数据将动态插入这里 -->
</tbody>
</table>
<script src="userList.js"></script>
</body>
</html>
JavaScript（userList.js）代码：
$(document).ready(function() {
$.ajax({
url: '/api/users', // 服务器端获取用户列表接口
type: 'GET',
dataType: 'json',
success: function(data) {
if (data.length > 0) {
var tbody = '';
$.each(data, function(index, user) {
tbody += '<tr>';
tbody += '<td>' + user.id + '</td>';
tbody += '<td>' + user.name + '</td>';
tbody += '<td>' + user.email + '</td>';
tbody += '</tr>';
});
$('#userTable tbody').html(tbody);
} else {
$('#userTable tbody').html('<tr><td colspan="3">没有用户数据</td></tr>');
}
},
error: function(xhr, status, error) {
$('#userTable tbody').html('<tr><td colspan="3">加载用户数据失败，请稍后再试。</td></tr>');
console.error('Error:', error);
}
});
});
说明：
- 数据获取：通过 GET 请求从服务器获取用户数据。
- 数据渲染：遍历返回的数据，动态生成表格行并插入到表格的
tbody中。 - 无数据处理：如果返回的数据为空，显示相应提示。
- 错误处理：处理网络错误或服务器错误。
图书管理系统案例
功能概述
- 用户登录：用户输入用户名和密码，通过 Ajax 登录。
- 用户信息列表：登录成功后，显示用户信息列表。
- 图书列表：显示图书信息列表。
- 添加图书：通过表单添加新图书，使用 Ajax 提交数据。
- 删除图书：删除指定图书，使用 Ajax 发送删除请求。
实现步骤
-
设置服务器端接口：
/api/login：处理登录请求，返回登录结果。/api/users：获取用户信息列表。/api/books：获取图书信息列表。/api/books/add：添加新图书。/api/books/delete：删除图书。
-
前端页面结构：
- 登录页面：包含用户名和密码输入框及登录按钮。
- 主页面：包含用户信息列表、图书列表、添加图书表单。
-
前端脚本：
- 登录脚本：处理登录逻辑，显示消息。
- 用户信息脚本：获取并显示用户信息列表。
- 图书列表脚本：获取并显示图书列表。
- 添加图书脚本：处理添加图书逻辑。
- 删除图书脚本：处理删除图书逻辑。
代码示例
1. 登录页面（login.html）
<!DOCTYPE html>
<html>
<head>
<title>图书管理系统 - 登录</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<label>用户名:</label>
<input type="text" id="username" name="username" required /><br /><br />
<label>密码:</label>
<input type="password" id="password" name="password" required /><br /><br />
<button type="submit">登录</button>
</form>
<div id="message"></div>
<script>
$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: '/api/login',
type: 'POST',
data: JSON.stringify({ username: username, password: password }),
contentType: 'application/json',
dataType: 'json',
success: function(response) {
if (response.success) {
$('#message').html('<p style="color: green;">登录成功！</p>');
// 重定向到主页面
window.location.href = '/dashboard.html';
} else {
$('#message').html('<p style="color: red;">登录失败，请检查用户名和密码。</p>');
}
},
error: function(xhr, status, error) {
$('#message').html('<p style="color: red;">发生错误，请稍后再试。</p>');
console.error('Error:', error);
}
});
});
});
</script>
</body>
2. 主页面（dashboard.html）
<!DOCTYPE html>
<html>
<head>
<title>图书管理系统 - 主页面</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* 样式略 */
</style>
</head>
<body>
<h2>欢迎，<span id="username"></span></h2>
<h3>用户信息</h3>
<table id="userTable">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<!-- 用户数据将动态插入这里 -->
</tbody>
</table>
<h3>图书列表</h3>
<table id="bookTable">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 图书数据将动态插入这里 -->
</tbody>
</table>
<h3>添加新图书</h3>
<form id="addBookForm">
<label>书名:</label>
<input type="text" id="bookName" name="bookName" required /><br /><br />
<label>作者:</label>
<input type="text" id="author" name="author" required /><br /><br />
<label>价格:</label>
<input type="number" id="price" name="price" required /><br /><br />
<button type="submit">添加图书</button>
</form>
<script>
$(document).ready(function() {
// 获取并显示用户信息
$.ajax({
url: '/api/users',
type: 'GET',
dataType: 'json',
success: function(data) {
if (data.length > 0) {
var tbody = '';
$.each(data, function(index, user) {
tbody += '<tr>';
tbody += '<td>' + user.id + '</td>';
tbody += '<td>' + user.name + '</td>';
tbody += '<td>' + user.email + '</td>';
tbody += '</tr>';
});
$('#userTable tbody').html(tbody);
$('#username').text(data[0].name);
} else {
$('#userTable tbody').html('<tr><td colspan="3">没有用户数据</td></tr>');
}
},
error: function(xhr, status, error) {
$('#userTable tbody').html('<tr><td colspan="3">加载用户数据失败，请稍后再试。</td></tr>');
console.error('Error:', error);
}
});
// 获取并显示图书列表
function loadBooks() {
$.ajax({
url: '/api/books',
type: 'GET',
dataType: 'json',
success: function(data) {
if (data.length > 0) {
var tbody = '';
$.each(data, function(index, book) {
tbody += '<tr>';
tbody += '<td>' + book.id + '</td>';
tbody += '<td>' + book.name + '</td>';
tbody += '<td>' + book.author + '</td>';
tbody += '<td>' + book.price + '</td>';
tbody += '<td><button class="deleteBtn" data-id="' + book.id + '">删除</button></td>';
tbody += '</tr>';
});
$('#bookTable tbody').html(tbody);
} else {
$('#bookTable tbody').html('<tr><td colspan="5">没有图书数据</td></tr>');
}
},
error: function(xhr, status, error) {
$('#bookTable tbody').html('<tr><td colspan="5">加载图书数据失败，请稍后再试。</td></tr>');
console.error('Error:', error);
}
});
}
loadBooks();
// 处理添加图书
$('#addBookForm').submit(function(event) {
event.preventDefault();
var bookName = $('#bookName').val();
var author = $('#author').val();
var price = $('#price').val();
$.ajax({
url: '/api/books/add',
type: 'POST',
data: JSON.stringify({ name: bookName, author: author, price: price }),
contentType: 'application/json',
dataType: 'json',
success: function(response) {
if (response.success) {
$('#message').html('<p style="color: green;">图书添加成功！</p>');
loadBooks();
$('#addBookForm')[0].reset();
} else {
$('#message').html('<p style="color: red;">图书添加失败，请重试。</p>');
}
},
error: function(xhr, status, error) {
$('#message').html('<p style="color: red;">发生错误，请稍后再试。</p>');
console.error('Error:', error);
}
});
});
// 处理删除图书
$(document).on('click', '.deleteBtn', function() {
var bookId = $(this).data('id');
$.ajax({
url: '/api/books/delete',
type: 'POST',
data: JSON.stringify({ id: bookId }),
contentType: 'application/json',
dataType: 'json',
success: function(response) {
if (response.success) {
$('#message').html('<p style="color: green;">图书删除成功！</p>');
loadBooks();
} else {
$('#message').html('<p style="color: red;">图书删除失败，请重试。</p>');
}
},
error: function(xhr, status, error) {
$('#message').html('<p style="color: red;">发生错误，请稍后再试。</p>');
console.error('Error:', error);
}
});
});
});
</script>
</body>
3. 服务器端示例（Node.js + Express）
注意： 这是一个简单的服务器端示例，用于演示 Ajax 请求的处理。实际应用中需要更完善的安全性和错误处理。
const express = require('express');
const app = express();
const port = 3000;
// 中间件
app.use(express.json());
// 模拟用户数据
const users = [
{ id: 1, name: '张三', email: 'zhangsan@example.com' },
{ id: 2, name: '李四', email: 'lisi@example.com' }
];
// 模拟图书数据
let books = [
{ id: 1, name: '《JavaScript 高级程序设计》', author: 'Nicholas C. Zakas', price: 89 },
{ id: 2, name: '《深入浅出 Node.js》', author: '朴灵', price: 79 }
];
// 用户登录
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
// 简单验证
if (username === 'admin' && password === 'password') {
res.json({ success: true });
} else {
res.json({ success: false });
}
});
// 获取用户信息列表
app.get('/api/users', (req, res) => {
res.json(users);
});
// 获取图书列表
app.get('/api/books', (req, res) => {
res.json(books);
});
// 添加新图书
app.post('/api/books/add', (req, res) => {
const { name, author, price } = req.body;
const newBook = {
id: books.length + 1,
name: name,
author: author,
price: price
};
books.push(newBook);
res.json({ success: true });
});
// 删除图书
app.post('/api/books/delete', (req, res) => {
const { id } = req.body;
books = books.filter(book => book.id !== id);
res.json({ success: true });
});
// 启动服务器
app.listen(port, () => {
console.log(`服务器正在运行在 http://localhost:${port}`);
});
说明：
-
服务器端接口：
/api/login：处理登录请求，简单验证用户名和密码。/api/users：返回用户信息列表。/api/books：返回图书列表。/api/books/add：添加新图书。/api/books/delete：删除指定图书。
-
数据存储：本示例使用内存中的数组存储用户和图书数据，实际应用中应使用数据库。
总结
本文详细介绍了 Ajax 的基本概念、工作原理、优点以及常用的 Ajax 方法，并通过 jQuery 提供了具体的代码示例。通过 图书管理系统 的案例，我们展示了如何使用 Ajax 实现用户登录、用户信息列表、图书列表的获取、添加和删除等功能。
关键点：
- 异步通信：Ajax 允许在不刷新整个页面的情况下与服务器通信。
- 数据格式：常用的数据格式包括 XML 和 JSON，其中 JSON 更轻量、更易解析。
- jQuery Ajax 方法：提供了简洁的接口，简化了 Ajax 操作。
- 前端与服务器端交互：通过 Ajax，前端可以动态获取和提交数据，提升用户体验。
通过掌握 Ajax 技术，开发者可以创建更加动态和响应式的网页应用，提升应用的性能和用户体验。
扫一扫
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
