當前位置：
首頁 >
Ajax -get 请求
發(fā)布時間：2025/3/18
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Ajax -get 请求
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX發(fā)送GET請求并傳遞參數(shù)</title>
</head>
<body>
<ul id="list"></ul>
<script>
var listElement = document.getElementById('list');
// 發(fā)送請求獲取列表數(shù)據(jù)呈現(xiàn)在頁面
// =======================================
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 => 數(shù)據(jù)
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操作獲取服務端對應數(shù)據(jù)的信息
// 如何獲取當前被點擊元素對應的數(shù)據(jù)的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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX發(fā)送GET請求并傳遞參數(shù)</title>
</head>
<body>
<ul id="list"></ul>
<script>
var listElement = document.getElementById('list');
// 發(fā)送請求獲取列表數(shù)據(jù)呈現(xiàn)在頁面
// =======================================
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 => 數(shù)據(jù)
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操作獲取服務端對應數(shù)據(jù)的信息
// 如何獲取當前被點擊元素對應的數(shù)據(jù)的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>
轉載于:https://www.cnblogs.com/lujieting/p/10291257.html
總結
以上是生活随笔為你收集整理的Ajax -get 请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c#后台线程更新界面
- 下一篇： 新西兰激光事故5年增加130% 官员警告