Aja5 - 请求PHP数据

最新推荐文章于 2022-03-21 21:33:14 发布

lucky芬

最新推荐文章于 2022-03-21 21:33:14 发布

阅读量234

点赞数

分类专栏：练手小案例

本文链接：https://blog.csdn.net/daimomo000/article/details/78688107

版权

练手小案例专栏收录该内容

42 篇文章 2 订阅

订阅专栏

<!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);
 ?>

lucky芬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Aja5 - 请求PHP数据

Ajax 5 - 请求PHP数据请求所有用户所有用户 document.getElementById('button2').addEventListener('click',loadUsers); function loadUsers(){ var xhr = new XMLHttpRequest(); xhr.open("GET","users.p
复制链接

扫一扫

专栏目录