如何不使用jQuery从服务器外部JSON提取username并展示到HTML页面？

没问题！不用jQuery完全可以搞定，用原生JavaScript的Fetch API就能轻松实现需求，这是现在最主流也最简洁的方案，我给你一步步拆解：

第一步：先准备HTML结构 #

首先需要一个容器来展示用户名列表，比如在页面里加一个<div>：

<!DOCTYPE html>
<html>
<head>
    <title>所有用户</title>
</head>
<body>
    <h1>所有用户</h1>
    <!-- 专门用来放用户名的容器 -->
    <div id="user-list"></div>

    <script>
        <!-- 下面的JS代码写在这里 -->
    </script>
</body>
</html>

第二步：用Fetch API请求并渲染数据 #

Fetch是原生JS的异步请求API，语法简洁易读。直接在<script>标签里写以下代码就行：

// 获取页面上的用户列表容器
const userListContainer = document.getElementById('user-list');

// 请求服务器上的JSON文件（记得把路径改成你自己的文件路径，比如/users.json）
fetch('你的JSON文件路径')
    .then(response => {
        // 先检查请求是否成功（状态码在200-299之间）
        if (!response.ok) {
            throw new Error(`请求失败啦，状态码：${response.status}`);
        }
        // 把响应内容转成JSON格式
        return response.json();
    })
    .then(users => {
        // 遍历每个用户对象，提取username并展示
        users.forEach(user => {
            // 创建一个p标签来显示单个用户名
            const userItem = document.createElement('p');
            userItem.textContent = `用户名：${user.username}`;
            // 把这个标签添加到容器里
            userListContainer.appendChild(userItem);
        });
    })
    .catch(error => {
        // 处理请求或解析出错的情况
        userListContainer.textContent = `加载用户失败：${error.message}`;
        console.error('错误详情：', error);
    });

重要提醒：检查你的JSON格式 #

你给出的JSON示例格式有点小问题，多个对象需要用数组包裹起来，不然会解析失败。正确的格式应该是这样：

[
{"name":"asfd","username":"awsf","email":"kean","age":"21","gender":"Male","submit":"Submit"},
{"name":"asdf","username":"asfd","email":"xxx@xxx.com"}
]

兼容旧浏览器的备选方案（比如IE） #

如果需要兼容非常旧的浏览器，可以用传统的XMLHttpRequest来实现，代码如下：

const userListContainer = document.getElementById('user-list');
const xhr = new XMLHttpRequest();

// 初始化请求
xhr.open('GET', '你的JSON文件路径', true);

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        try {
            // 解析JSON数据
            const users = JSON.parse(xhr.responseText);
            // 渲染用户名
            users.forEach(user => {
                const userItem = document.createElement('p');
                userItem.textContent = `用户名：${user.username}`;
                userListContainer.appendChild(userItem);
            });
        } catch (parseError) {
            userListContainer.textContent = '解析JSON失败：' + parseError.message;
        }
    } else {
        userListContainer.textContent = `请求失败，状态码：${xhr.status}`;
    }
};

// 处理网络错误
xhr.onerror = function() {
    userListContainer.textContent = '网络请求出错，请检查文件路径是否正确';
};

// 发送请求
xhr.send();

最后再提两个小细节：

• 确保JSON文件的路径正确，如果HTML和JSON在同一目录下，直接写文件名就行；
• 如果是本地打开HTML文件（file://协议），可能会遇到跨域问题，建议用本地服务器运行（比如VSCode的Live Server插件、Python的http.server）。

内容的提问来源于stack exchange，提问作者user8287472