Ajax获取数据然后显示在页面的实现方法

实现Ajax获取数据并在页面中显示需要以下步骤：

1.发起Ajax请求

在客户端发起Ajax请求，使用XMLHttpRequest对象：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.send(null);

其中 open() 方法接收三个参数：请求的类型、请求的URL、请求是否异步处理。如果是异步处理，则需要在请求发起后指定回调函数来接收服务器响应的数据。

2.处理服务器响应

在客户端异步接收服务器响应，通过回调函数来进行处理：

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
             // 数据已经成功返回，处理响应数据
             var data = xhr.responseText;
             // 处理数据
             processData(data);
        } else {
            alert('请求出错，错误码：' + xhr.status);
        }
    }
};

function processData(data) {
    // 处理数据的代码
}

回调函数 onreadystatechange 会在每次 readyState 值改变时被调用。readyState 属性表示请求/响应过程的当前活动阶段。readyState = 4 表示所有数据已经接收完毕，而 status 属性则表示服务器响应的 HTTP 状态码。

3.渲染数据到页面

一旦服务器响应返回并成功处理数据，将得到数据的变量传入渲染函数，使用DOM操作将数据渲染到页面中。

function processData(data) {
    var dataList = JSON.parse(data);
    var html = '';
    for (var i = 0; i < dataList.length; i++) {
        html += '<li>' + dataList[i] + '</li>';
    }
    document.getElementById('dataList').innerHTML = html;
}

在这个示例中，我们先将从服务器返回的JSON数据解析为JavaScript对象，然后通过循环遍历每个数据对象，并将它们渲染为HTML列表，在最后使用 innerHTML 方法，将渲染好的HTML代码片段全部插入到页面相对应的位置中。

示例1:

以下代码展示了一个包含AJAX获取GitHubAPI数据的简单代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX 获取 GitHub 用户信息</title>
</head>
<body>
    <div>
        <label>GitHub用户名：</label>
        <input id="gh-username" type="text">
        <button id="gh-userbtn">获取信息</button>
    </div>
    <div id="gh-data"></div>
    <script>
    var getUserInfo = function(username) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://api.github.com/users/' + username, true);
        xhr.send(null);

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var userInfo = JSON.parse(xhr.responseText);
                console.log(userInfo);
                document.getElementById('gh-data').innerHTML = `
                    <div>
                        <h2>${userInfo.login}</h2>
                        <img width="100" height="100" src="${userInfo.avatar_url}">
                        <p>${userInfo.bio || '暂无介绍'}</p>
                        <p>公司：${userInfo.company || '暂无公司'}</p>
                        <p>地址：${userInfo.location || '未知'}</p>
                    </div>
                `
            }
        };
    };

    document.getElementById('gh-userbtn').addEventListener('click', function() {
        var username = document.getElementById('gh-username').value;
        getUserInfo(username);
    });
    </script>
</body>
</html>

在这个示例中，我们使用 XMLHttpRequest 对象发起 GET 请求到GitHub API，获取对应 username 用户的信息，并将获取的数据渲染到页面中。

示例2：

以下代码展示了一个包含 AJAX 获取天气预报信息的简单代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX 获取天气预报</title>
</head>
<body>
    <h2>天气预报</h2>
    <button id="getWeatherBtn">获取天气预报</button>

    <table border="1" style="margin-top: 20px;">
        <tr><th>城市</th><th>天气</th></tr>
        <tbody id="weatherList"></tbody>
    </table>

    <script>
        var getWeatherInfo = function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=广州', true);
            xhr.send(null);

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var weatherData = JSON.parse(xhr.responseText).data.forecast;
                    var html = '';
                    for (var i = 0; i < weatherData.length; i++) {
                        html += `
                            <tr>
                                <td>${weatherData[i].date}</td>
                                <td>${weatherData[i].type}</td>
                            </tr>
                        `;
                    }
                    document.getElementById('weatherList').innerHTML = html;
                }
            };
        };

        document.getElementById('getWeatherBtn').addEventListener('click', function() {
            getWeatherInfo();
        });
    </script>
</body>
</html>

在这个示例中，我们使用 XMLHttpRequest 对象发起 GET 请求到 http://wthrcdn.etouch.cn/weather_mini 接口，通过接口的 city 参数来实现不同城市天气的查询，最终将获取的数据渲染到页面中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax获取数据然后显示在页面的实现方法 - Python技术站

Ajax获取数据然后显示在页面的实现方法

1.发起Ajax请求

2.处理服务器响应

3.渲染数据到页面

相关文章