Aja5
来源：互联网 发布：jquery书籍推荐知乎 编辑：程序博客网 时间：2024/06/03 21:00
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Ajax 5 - 请求PHP数据</title></head><body><button id="button2">请求所有用户</button><br><br><h1>所有用户</h1><div id="users"></div><script>document.getElementById('button2').addEventListener('click',loadUsers);function loadUsers(){var xhr = new XMLHttpRequest();xhr.open("GET","users.php",true);xhr.onload = function(){if (this.status == 200) {var users = JSON.parse(this.responseText);var output = '';// 遍历数组for(var i in users){output +='<ul>'+'<li>'+users[i].id+'</li>'+'<li>'+users[i].name+'</li>'+'</ul>';;}document.getElementById('users').innerHTML = output;}}xhr.send();}</script></body></html><?php $conn = mysqli_connect("localhost","root","","ajaxtest");$query = 'SELECT * FROM users';$result = mysqli_query($conn,$query);$users = mysqli_fetch_all($result,MYSQLI_ASSOC);echo json_encode($users); ?>阅读全文
0 0
