<!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>
Ajax -get 请求
原文地址：https://www.cnblogs.com/lujieting/p/10291257.html