Ajax技术的关键字搜索小例

最新推荐文章于 2022-11-13 21:41:21 发布

guoyinshuai

最新推荐文章于 2022-11-13 21:41:21 发布

阅读量603

点赞数

文章标签：需要连接后台数据库提供该数据

本文链接：https://blog.csdn.net/guoyinshuai/article/details/81987676

版权

<?php
// echo $_GET['key'];
$key = $_GET['key'];

$sql = "select * from ali_admin where admin_email like '%$key%'";
echo $sql;
//学会排错步骤，排错方法，
 die();

 
$conn = mysql_connect('localhost','root','root');
mysql_select_db('test');
mysql_query('set names utf8');
$resource = mysql_query($sql);
// print_r(mysql_fetch_assoc($resource));
// die();
$arr = [];
while ($row = mysql_fetch_assoc($resource)){
	array_push($arr,$row);
}
echo json_encode($arr);
// print_r($arr);
?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<input type="text" name="name" id="txt">
<input type="button" value="搜索" id="btn">
<table border="1" width="600">
	<thead>
		<tr>
			<td>id</td>
			<td>邮箱</td>
			<td>昵称</td>
			<td>年龄</td>
			<td>性别</td>
		</tr>
	</thead>
	<tbody id="tb">
		
	</tbody>
</table>
<script type="text/javascript">
// 1.在搜索按钮上绑定点击事件
// 2.事件函数
// 1)获取关键词
// 2)发送ajax请求，并将关键词发送给后端
document.getElementById('btn').onclick = function(){
	var keyword = document.getElementById('txt').value;
	var xhr = new XMLHttpRequest();
	
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4&&xhr.status==200){
			//console.log(xhr.responseText);排错时用console.log()控制台打印结果

			//return;//排错时用return返回值，截止代码执行。


			// var json_arr = JSON.parse(xhr.responseText);
			
			// console.log(json_arr);
			var str='';
			for(var i = 0; i < json_arr.length; i++){
				str += '<tr>';
				str += '<td>' + json_arr[i].admin_id + '</td>';
				str += '<td>' + json_arr[i].admin_email + '</td>';
				str += '<td>' + json_arr[i].admin_nickname + '</td>';
				str += '<td>' + json_arr[i].admin_age + '</td>';
				str += '<td>' + json_arr[i].admin_gender + '</td>';
				str += '</tr>';
			}
			document.getElementById('tb').innerHTML = str;
		}
	}
	xhr.open('get','index.php?key='+keyword+'&_='+Math.random());
	xhr.send();
}
</script>
</body>
</html>

guoyinshuai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax技术的关键字搜索小例

&lt;?php// echo $_GET['key'];$key = $_GET['key'];$sql = "select * from ali_admin where admin_email like '%$key%'";echo $sql;//学会排错步骤，排错方法， die(); $conn = mysql_connect('localhost','root','r...
复制链接

扫一扫