当前位置：首页 > news >正文

AJAX JSON 实例

news 2025/10/9 6:34:58

AJAX JSON 实例

引言

AJAX（Asynchronous JavaScript and XML）是一种技术，它允许网页与服务器进行异步通信，从而无需重新加载整个页面即可更新网页的特定部分。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。本文将通过一个具体的实例来介绍如何使用AJAX和JSON实现数据交互。

实例背景

假设我们有一个简单的在线书店，用户可以通过网页浏览书籍信息。当用户点击某本书籍时，我们希望不刷新整个页面，而是仅更新显示该书详细信息的部分。

实例步骤

1. 准备数据

首先，我们需要准备一些JSON格式的数据，用于模拟服务器返回的书籍信息。以下是一个示例：

{"books": [{"id": 1,"title": "JavaScript高级程序设计","author": " Nicholas C. Zakas","price": 89.00},{"id": 2,"title": "你不知道的JavaScript","author": " Kyle Simpson","price": 98.00},{"id": 3,"title": "JavaScript权威指南","author": " David Flanagan","price": 79.00}]
}

2. 创建HTML页面

接下来，我们创建一个简单的HTML页面，用于展示书籍列表和点击后显示的书籍详细信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>AJAX JSON 实例</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>#book-info {display: none;}</style>
</head>
<body><h1>在线书店</h1><ul id="book-list"></ul><div id="book-info"></div><script>// 以下为JavaScript代码</script>
</body>
</html>

3. 使用jQuery获取数据

在这个实例中，我们将使用jQuery来发送AJAX请求并处理返回的数据。以下是JavaScript代码部分：

$(document).ready(function() {// 获取书籍列表$.ajax({url: 'books.json', // JSON数据的URLtype: 'GET',dataType: 'json',success: function(data) {// 处理返回的数据var books = data.books;var bookList = $('#book-list');for (var i = 0; i < books.length; i++) {var book = books[i];var listItem = $('<li></li>').text(book.title);listItem.click(function() {// 获取点击的书籍信息var bookId = $(this).data('id');// 获取书籍详细信息$.ajax({url: 'book/' + bookId + '.json', // 详细信息的URLtype: 'GET',dataType: 'json',success: function(detail) {// 显示书籍详细信息var bookInfo = $('#book-info');bookInfo.html('<h2>' + detail.title + '</h2>' +'<p>作者：' + detail.author + '</p>' +'<p>价格：￥' + detail.price + '</p>');bookInfo.show();}});});listItem.data('id', book.id);bookList.append(listItem);}}});
});