主页/jQuery教程/jQuery Ajax/jQuery 元素级Ajax 处理JSON与XML数据

jQuery教程

jQuery 元素级Ajax 处理JSON与XML数据

4,852字
21–31 分钟

概览

目录

在动态网页开发中，与服务器交换结构化数据是核心需求。jQuery 提供了强大且一致的工具来处理两种最常见的数据格式：JSON 和 XML。通过 $.ajax() 方法及其便捷形式，开发者可以轻松获取并解析这些数据。jQuery 处理 JSON 通常涉及将字符串解析为 JavaScript 对象，然后使用标准 JavaScript 语法或 $.each() 进行遍历。而 jQuery 处理 XML 则是将响应解析为可遍历的 XML 文档，并利用 jQuery 强大的 DOM 操作方法（如 .find()、.filter()）来提取所需信息。

处理 JSON 数据

JSON（JavaScript Object Notation）因其轻量级和与 JavaScript 的无缝集成，已成为 Web API 最主流的数据格式。jQuery 通过 $.getJSON() 便捷方法和 $.ajax() 中的 dataType: "json" 选项，将获取的 JSON 字符串自动解析为 JavaScript 对象。

获取与遍历 JSON

当 dataType 设置为 "json" 或使用 $.getJSON() 时，jQuery 内部调用 JSON.parse()（在支持的浏览器中）将响应文本转换为 JavaScript 对象。然后，可以像操作普通 JavaScript 数组和对象一样处理这些数据。

语法

// 使用 $.getJSON()
jQuery.getJSON( url [, data ] [, success ] )

// 在 $.ajax() 中使用
$.ajax({
  url: url,
  dataType: "json",
  success: function(data) {
    // data 是一个已经解析好的 JavaScript 对象/数组
  }
});

示例：获取并展示 GitHub 用户信息

以下示例展示了如何从 GitHub API 获取 JSON 格式的用户数据，并将其动态渲染到 HTML 页面中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery 处理 JSON 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .user-card { border:1px solid #ccc; padding:15px; margin:10px 0; border-radius:5px; }
        .user-card img { width:50px; height:50px; border-radius:50%; vertical-align:middle; margin-right:15px; }
        .user-card span { font-size:1.2em; }
    </style>
</head>
<body>
    <button id="loadUsers">加载 GitHub 用户</button>
    <div id="user-container"></div>

    <script>
        $('#loadUsers').on('click', function() {
            var $container = $('#user-container');
            $container.html('<p>加载中...</p>');

            $.getJSON('https://api.github.com/users?since=1&per_page=5', function(users) {
                var htmlString = '';
                // 遍历返回的数组
                $.each(users, function(index, user) {
                    htmlString += '<div class="user-card">' +
                                  '<img src="' + user.avatar_url + '" alt="' + user.login + '">' +
                                  '<span><strong>' + user.login + '</strong> (ID: ' + user.id + ')</span>' +
                                  '<br><a href="' + user.html_url + '" target="_blank">查看资料</a>' +
                                  '</div>';
                });
                $container.html(htmlString);
            }).fail(function() {
                $container.html('<p style="color:red;">加载失败。</p>');
            });
        });
    </script>
</body>
</html>

在这个例子中，$.getJSON() 发送请求，GitHub API 返回一个 JSON 数组。jQuery 自动解析该数组，然后使用 $.each() 遍历数组元素。每个 user 对象可以直接通过点号（如 user.login）访问其属性，这体现了 jQuery 处理 JSON 的核心优势：数据解析后立即可用，无需额外转换。

处理 XML 数据

尽管 JSON 更为流行，XML（eXtensible Markup Language）仍在许多遗留系统或特定行业（如金融、医疗）中广泛使用。jQuery 同样提供了完备的 jQuery 处理 XML 能力，主要通过将响应解析为 XML 文档，然后利用 jQuery 的选择器和遍历方法来操作这个文档。

获取与遍历 XML

当 $.ajax() 的 dataType 设置为 "xml" 时，jQuery 会将响应文本解析为一个 XML 文档对象。这个文档可以作为 jQuery 对象进行处理，允许使用 .find()、.filter()、.children() 等 DOM 遍历方法来定位元素和提取属性。

语法

$.ajax({
  url: url,
  dataType: "xml",
  success: function(xmlDoc) {
    // xmlDoc 是一个 XML 文档对象
    $(xmlDoc).find('item').each(function() {
      var title = $(this).find('title').text();
      // 处理每个 item
    });
  }
});

示例：解析 RSS 源并显示新闻

以下示例展示了如何获取一个 RSS 源（XML 格式），解析其中的新闻条目，并将标题和链接展示在页面上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery 处理 XML 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .news-item { border-bottom:1px dashed #ccc; padding:8px 0; }
        .news-item a { text-decoration:none; color:#0366d6; }
        .news-item a:hover { text-decoration:underline; }
    </style>
</head>
<body>
    <button id="loadNews">加载最新新闻</button>
    <div id="news-container"></div>

    <script>
        $('#loadNews').on('click', function() {
            var $container = $('#news-container');
            $container.html('<p>加载新闻...</p>');

            $.ajax({
                url: 'https://hnrss.org/newest?count=5', // 一个提供 RSS 的示例源
                dataType: 'xml',
                success: function(xmlDoc) {
                    var $xml = $(xmlDoc);
                    var $items = $xml.find('item'); // 定位所有 <item> 标签
                    var htmlString = '<h3>最新新闻</h3><ul>';

                    $items.each(function() {
                        var $item = $(this);
                        var title = $item.find('title').text(); // 提取 <title>
                        var link = $item.find('link').text();   // 提取 <link>
                        htmlString += '<li class="news-item"><a href="' + link + '" target="_blank">' + title + '</a></li>';
                    });

                    htmlString += '</ul>';
                    $container.html(htmlString);
                },
                error: function() {
                    $container.html('<p style="color:red;">新闻加载失败。</p>');
                }
            });
        });
    </script>
</body>
</html>

此示例中，dataType: "xml" 确保响应被解析为 XML。通过 $(xmlDoc) 将 XML 文档转换为 jQuery 对象后，$xml.find('item') 利用 CSS 选择器语法快速定位所有 item 元素。随后，遍历每个 item，使用 $(this).find('title').text() 提取子元素文本。这种将 XML 文档包装为 jQuery 对象的方式，使得 jQuery 处理 XML 与处理 HTML DOM 几乎完全一致，极大地降低了学习成本。

JSON 与 XML 处理对比

下表总结了在 jQuery 中处理 JSON 和 XML 数据的主要区别，以帮助开发者在实际项目中做出合适的选择。

特性处理 JSON (jQuery)处理 XML (jQuery)
数据类型 (dataType)"json" 或使用 $.getJSON()"xml"
解析结果JavaScript 对象/数组XML 文档对象
数据访问方式直接通过属性访问 (obj.property)通过 jQuery 遍历方法，如 .find(), .filter(), .children()
典型遍历方法$.each() 或 for 循环$(xmlDoc).find('tagName').each()
性能解析速度快，数据量小解析相对较慢，结构冗余
适用场景现代 Web API、配置数据、无状态请求遗留系统、文档型数据、需要命名空间支持的数据
代码简洁性非常简洁，与 JavaScript 原生集成稍显繁琐，但选择器语法强大

版本变更记录

版本变更内容
1.0引入对 XML 文档的基本处理能力。
1.2引入 jQuery.getJSON() 便捷方法，简化 JSON 数据获取。
1.4增强 jQuery.parseJSON()，要求 JSON 字符串格式严格有效。
3.0jQuery.parseJSON() 被标记为不推荐使用，推荐使用原生 JSON.parse()。
4.0正式移除 jQuery.parseJSON()、jQuery.parseXML() 等已弃用的工具方法。处理 JSON 和 XML 完全依赖 $.ajax() 的 dataType 自动转换或原生解析方法。

浏览器兼容性

jQuery 处理 JSON 和 XML 的能力依赖于浏览器的原生支持。其兼容性与 jQuery 核心的 Ajax 功能一致，覆盖了几乎所有现代及历史浏览器。

浏览器最低支持版本
Chrome30+
Edge12+
Firefox25+
Opera18+
Safari7+
Chrome Android30+
Firefox for Android25+
Opera Android18+
Safari on iOS7+
Samsung Internet4.0+
WebView Android4.4+
WebView on iOS7+

注：对于 IE6-8，jQuery 1.x 系列通过回退机制提供了有限的 JSON 和 XML 支持。jQuery 4.x 已放弃对 IE 10 及更早版本的支持，但仍兼容 IE11。在处理 XML 时，所有受支持浏览器均能正确解析和遍历 XML 文档。

掌握 jQuery 处理 JSON 和 jQuery 处理 XML 的能力，意味着无论与何种后端服务交互，都能游刃有余。通过统一且直观的 API，jQuery 将这些异构数据格式的处理方式抽象化，使开发者能够专注于业务逻辑，快速构建数据驱动的动态 Web 应用。

最新发布