Ajax -get 请求
发布时间：2020-12-16 02:58:57 所属栏目：百科 来源：网络整理
导读：!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleAJAX发送GET请求并传递参数/title/headbodyul id="list"/ulscript var listElement = document.getElementById(‘list‘); // 发送请求获取列表数据呈现在页面 // =============================
<!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>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |