Ajax -get 请求

最新推荐文章于 2023-12-28 17:30:00 发布

weixin_34244102

最新推荐文章于 2023-12-28 17:30:00 发布

阅读量88

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/lujieting/p/10291257.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX发送GET请求并传递参数</title>
</head>
<body>
<ul id="list"></ul>

<script>

    var listElement = document.getElementById('list');

    // 发送请求获取列表数据呈现在页面
    // =======================================

    var xhr = new XMLHttpRequest();

    xhr.open('GET', 'users.php');

    xhr.send();

    xhr.onreadystatechange = function () {
        if (this.readyState !== 4) return;
        var data = JSON.parse(this.responseText);
        // data => 数据

        for (var i = 0; i < data.length; i++) {
            var liElement = document.createElement('li');
            liElement.innerHTML = data[i].name;
            liElement.id = data[i].id;

            listElement.appendChild(liElement);

            liElement.addEventListener('click', function () {
                // TODO: 通过AJAX操作获取服务端对应数据的信息
                // 如何获取当前被点击元素对应的数据的ID
                // console.log(this.id)
                var xhr1 = new XMLHttpRequest();
                xhr1.open('GET', 'users.php?id=' + this.id);
                xhr1.send();
                xhr1.onreadystatechange = function () {
                    if (this.readyState !== 4) return;
                    var obj = JSON.parse(this.responseText);
                    alert(obj.age)
                }
            })
        }
    }
</script>
</body>
</html>