Ajax+MySQL+PHP+jQuery实现异步请求页面并显示数据

完整效果图:

思路

1.先写insert.php插入数据（这里插入的93条）

<?php
	// 解决乱码
	header('content-type:text/html;charset=utf8');
	
	try{
   
		// 1.设置数据库连接
		$dsn="mysql:host=localhost;dbname=tx";
		
		// 2.创建PDO 生成数据库连接
		$pdo=new PDO($dsn,'root','');
		
		// 3.设置字符集
		$pdo->exec("set names utf8");
		
		// 4.准备插入语句
		$inse=$pdo->prepare("INSERT INTO pubu(path) VALUE(?)");
		// 5.执行sql语句
		//插入93条
		for($i=1;$i<=93;$i++){
   
			$inse->execute(array($i.'.jpg'));
		}
	}catch(Exception $e){
   
		echo $e.getMessage();
	}



?>

2.再写select.php查询数据（这里先查询20条）

<?php
	// 解决乱码
	header('content-type:text/html;charset=utf8');
	try{
   
		// 1.设置数据库连接
		$dsn="mysql:host=localhost;dbname=tx";
		
		// 2.创建PDO 生成数据库连接
		$pdo=new PDO($dsn,'root','');
		
		// 3.设置字符集
		$pdo->exec("set names utf8");
		
		// 4.查询语句 先查20条
		$sele=$pdo->prepare("SELECT path FROM pubu limit 0,20");
		
		// 5.执行sql语句
		$sele->execute();
		
		// 6.查询的语句解析结果集
		$data=$sele->fetchAll();
		
		// 7.输出
		echo json_encode($data);
	}catch(Exception $e){
   
		echo $e.getMessage();
	}
?>

3.瀑布布局

每个li设置等宽，然后一个li为一整列，li不设置高度，img设置width:100%

			.box{
   
				width: 100%;
			}
			.wrap{
   
				width: 1000px;
				margin: 0 auto;
			}
			ul{
   
				list-style: none;
				margin:0 auto;
				display: flex;
			}
			li{
   
				//设置等宽
				width: 300px;
			}
			li>img{
   
				width: 100%;
			}

<div class="box">
			<div class="wrap">
				<ul>
					<li>
						<img src="images/1.jpg">
						<div>1</div>
						<img src="images/5.jpg">
						<div>5</div>
						<img src="images/9.jpg">
						<div>9</div>
						<img src="images/13.jpg">
						<div>13</div>
						<img