原生js+ajax+php实现按下键盘字母出现提示内容（sql模糊搜索）

最新推荐文章于 2022-02-23 15:43:58 发布

iuukai

最新推荐文章于 2022-02-23 15:43:58 发布

阅读量321

点赞数

分类专栏： PHP学习

本文链接：https://blog.csdn.net/weixin_45389633/article/details/105972001

版权

PHP学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

可以跟着菜鸟教程走：https://www.runoob.com/ajax/ajax-asp-php.html

文章目录

一、数据库准备
二、html部分
三、php部分
四、运行

一、数据库准备

数据库：admin1；
数据表：user；
id：int自增主键；
在这里插入图片描述

二、html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function showHint(str) {
				var xmlhttp;
				//如果输入框为空 str.length==0，则该函数清空 txtHint 占位符的内容，并退出函数
				if (str.length == 0) {
					document.getElementById('txtHint').innerHTML = '';
					return;
				}

				/*---------------------ajax---------------------*/
				//创建 XMLHttpRequest 对象
				if (window.XMLHttpRequest) {
					xmlhttp = new XMLHttpRequest();
				} else {
					xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
				}
				//当服务器响应就绪时执行函数
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						document.getElementById('txtHint').innerHTML = xmlhttp.responseText;
					}
				}
				//向 URL 添加一个参数str；ulr指向需要调用的php文件
				xmlhttp.open('GET','chk.php?str='+str,true);
				xmlhttp.send();
			}
		</script>
	</head>
	<body>
		<h3>在输入框中输入字母：</h3>
		<form action="">
			<label for='text'>输入姓名：</label>
			<input type="text" onkeyup="showHint(this.value)" />
		</form>
		<p>提示信息：<br/><span id="txtHint"></span></p>
	</body>
</html>

三、php部分

chk.php

//chk.php
<?php
	//连接数据库 amdin1
	$dbhost = 'localhost';	//数据库服务主机地址
	$dbname = 'admin1';		//数据库账号
	$dbpass = 'admin1';		//数据库密码
	$conn = mysqli_connect($dbhost, $dbname, $dbpass, 'admin1');	//最后面参数是选择库
	mysqli_query($conn, 'set name utf8');
	mysqli_query($conn, 'set character set utf8');
	
	//判断数据库是否连接成功
	if (! $conn) {
		die('连接失败：'.mysqli_error($conn));
	}
	#echo '连接成功！';
	
	$str = $_GET['str'];	//注意此处，因为get传参，所以用get
	
	//if ($str != '') {		//当值不为空，也就是字符串长度大于0，才开始查询
	if (strlen($str) > 0){
		//模糊查询，获取所有相关值。%百分号为模糊查询，因为匹配首字母，所以前面不需百分号
		$sql = 'select name from user where name like "'.$str.'%"';
		$retval = mysqli_query($conn, $sql);
		//可以再写多一步 $retval 报错判断： if(!$retval){die('错误')}

		//mysqli_num_rows();结果集中行的数量，也就是行的length
		$row_length = mysqli_num_rows($retval);
		if ($row_length != 0) {
		//两种循环遍历
			//	for循环遍历
			#for ($i=0; $i<$row_length; $i++) {
			#	$row = mysqli_fetch_assoc($retval);
			#	echo $row['name'].'<br/>';
			#}

			//	while循环遍历
			while ($row = mysqli_fetch_assoc($retval)) {
				echo $row['name'].'<br/>';
			}
		} else {	//原理：查询不出数据，也就是行的长度为0
			echo '没有数据，查询失败！';	
		}
	}
?>