当前位置：首页 > 行业动态 > 正文

如何从外部网站检索通过JS加载的值？

admin
行业动态
2024-12-08
2326

从外部网站检索由JavaScript加载的值，通常需要使用Web抓取工具或浏览器自动化技术，如Selenium，来模拟用户操作并获取动态内容。

在现代网页开发中，从外部网站检索数据并动态加载到页面上是一种非常常见的需求，JavaScript（JS）作为一种强大的前端编程语言，提供了许多方法来实现这一功能，本文将详细介绍如何使用JavaScript从外部网站检索数据，并将其动态加载到网页中。

如何从外部网站检索通过JS加载的值？第1张

使用Fetch API从外部网站检索数据

Fetch API是现代浏览器提供的一种用于进行网络请求的接口，它支持异步操作并且返回Promise对象，使得处理网络请求变得更加简单和直观。

基本用法

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        // 在这里可以将数据加载到页面中
    })
    .catch(error => console.error('Error:', error));

上述代码示例展示了如何使用Fetch API从一个外部API获取JSON格式的数据。fetch函数发起一个GET请求，然后通过.then()方法处理响应，如果请求成功，响应会被解析为JSON格式；如果失败，则会进入.catch()方法处理错误。

动态加载数据到页面

假设我们有一个外部API返回以下JSON数据：

[
    { "id": 1, "name": "Item 1", "description": "Description of item 1" },
    { "id": 2, "name": "Item 2", "description": "Description of item 2" }
]

我们可以将这些数据动态加载到一个HTML表格中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Data Loading</title>
</head>
<body>
    <table id="data-table" border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <!-动态内容将插入到这里 -->
        </tbody>
    </table>
    <script>
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => {
                const tableBody = document.querySelector('#data-table tbody');
                data.forEach(item => {
                    const row = document.createElement('tr');
                    row.innerHTML =<td>${item.id}</td><td>${item.name}</td><td>${item.description}</td>;
                    tableBody.appendChild(row);
                });
            })
            .catch(error => console.error('Error:', error));
    </script>
</body>
</html>

在这个示例中，我们首先定义了一个HTML表格结构，然后在JavaScript中使用Fetch API获取数据，并将数据动态插入到表格的<tbody>部分。

使用XMLHttpRequest从外部网站检索数据

虽然Fetch API是现代浏览器的首选，但在某些情况下，你可能需要使用传统的XMLHttpRequest对象，以下是如何使用XMLHttpRequest从外部网站检索数据的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
        // 在这里可以将数据加载到页面中
    } else if (xhr.readyState === 4) {
        console.error('Error:', xhr.statusText);
    }
};
xhr.send();