一个简单的HTML+PHP+MySQL的交互页面(输入框内容查询,HTML页面显示)

写得很详细了,如果有问题留言再问哈!!!

一开始初学网页制作的时候,空余时间比较少,拿来代码就用,只要能实现功能就好
我那时候以为 HTML 和 PHP 之间的数据交互只能新开一个 PHP 网页,也就是简单在HTML页面用一下表单 (from) ,然后在 PHP 页面用一下变量接受,然后后面就写跟 MySQL 交互的代码。

<form action="login.php" method="POST">
	<input  type="text" name="name" placeholder="请输入用户名"/>
	<input  type="password" name="password" placeholder="请输入密码"/>
    <input name="login" type="button" value="登录" onclick=submit() />
</form>
$name = $_POST["name"];
$pwd = $_POST["password"];

action 指定的是接收表单数据的 PHP 文件,method有两种模式 post 和 get,这里就不赘述了,学习网址:https://www.runoob.com/php/php-get.html
PHP的变量形式就是 $+名字,method = post 的表单(from)的数据只用 $_POST 来接受,get的话就用 $_GET 来接受
-----------------------------==---------------------------------------------------------------------------------------------------------

下面进入正文

如果是需要频繁的和数据库交互显示的话,上面的这种方法不断跳转页面会很烦人,于是我在菜鸟教程那里想找有没有不需要跳转页面显示的方法,当我看到了这个 【AJAX数据库实例】的时候,我笑了,嘻嘻嘻,这就是我要找的。
在这里插入图片描述
在菜鸟教程里面的例程是通过下拉菜单选择来进行与数据库的交互,而我要实现的是输入框的内容和数据库的交互,于是我需要按找我的思路对代码进行了整改,交互的核心都离不开这个函数

<script>
function showSite(str)
{
    if (str=="")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    } 
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getsite_mysql.php?q="+str,true);
    xmlhttp.send();
}
</script>

那些 xmlhttp 什么的我一脸懵逼,看半天没搞懂,于是我决定,先用再说,这我觉得是个学习语言的技巧来的,可以借鉴一下,嘻嘻嘻

js(javascript) 写的函数前面都要加个function,约定俗成,function showSite(str) 括号里面的 str 显然就是参数了,if (str=="")这个判断也就是说参数为空的时候就 return 出来,中间那一大段跟参数 str 没啥关系就不理了,最后面那个 xmlhttp.open(“GET”,“getsite_mysql.php?q=”+str,true) 里面有 str 需要留心关注一下,那个 getsite_mysql.php.php 显然就是接受数据,移植函数的话要注意更改,那个 true 好像说是设置异步什么的,不太明白,简单了解了函数,直接复制黏贴就OK啦

先展示一下效果图

文本框空白点击【搜索
在这里插入图片描述
文本框输入【报纸】点击【搜索】(数据库有报纸的信息)
在这里插入图片描述
文本框输入【啦啦啦】点击【搜索】(数据库没有啦啦啦的信息)
在这里插入图片描述

在文本框输入【报纸】,然后点击搜索按钮就可以在下面看到一个表格,表格显示的【ID】【可回收垃圾】内容是要查询数据库后得出来的,如果文本框输入的东西数据库里面没有,那就显示【不知道】

下面就是直接看代码了

HTML全部代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>简单交互</title> //这里就是上网时候的标签页的名字
<script>
function showSite(str)
{
    if (str=="")
    {
        document.getElementById("txtHint").innerHTML="无输入";//这里小改,参数为空显示【无输入】
        return;
    } 
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","mysql.php?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>
	<label for="rec"><strong>我要查询</strong></label>//laber其实有没有都不差,听说是方便人点击用的
	<br>//换行操作,屡试不爽
    <input id="litter" type="text"  placeholder="报纸"/>
    //id 这个很关键,后面函数调用的参数要用到, placeholder 就是文本框为空时显示的东西
	<input type="submit" value="搜索" onclick="showSite(litter.value)"/>
	//onclick 点击触发函数运行,通过【.litter】指定 id="litter" 的文本框,【.value】指定文本框的输入内容
    <br>
    <div id="txtHint"><b>网站信息显示在这里……</b></div> 
    //这里也很关键,这里是 HTML 显示数据表格的地方,函数里面用到
</body>
</html>

PHP全部代码

<?php
$gett = $_GET["q"];
//获取数据,那个q写在函数xmlhttp.open("GET","mysql.php?q="+str,true)这里面,我惊呆了,根本不像话
 
$con = mysqli_connect('192.168.x.xxx:3306','yonghu','mima');
//这里是数据库操作基本的语句,连接MySQL数据库,需要写数据库地址,管理数据库的账号和密码
//这里提一个醒,如果是MySQL听说是密码账户加密了,当初在ubantu上安装时设置的账号密码不能用
//我只能设置一个远程的账户,给所有权限,参考网址:https://bbs.csdn.net/topics/340186098
if (!$con)
{
    die('Could not connect: ' . mysqli_error($con));
}

// 选择数据库
mysqli_select_db($con,"mydb");

// 设置编码,防止中文乱码
mysqli_set_charset($con, "utf8");

// 这里讲一下,litter_classify是数据表(table)名字,where的就是找litter_name=【报纸】的那一行
//直接写 '$get' 也可以的,加两个点我要干哈
$sql="SELECT * FROM litter_classify WHERE litter_name = '".$gett."'";
 
//这是MySQL执行语句,很important的,敲黑板!!!
//可以采用变量 $sql 形式
//也可以直接MySQL语句直接干"SELECT * FROM litter_classify WHERE litter_name = '报纸'"
$result = mysqli_query($con,$sql);
 
 //php的 echo 语句功能非常的强大,可以写HTML语句,加个class id 的还能设置css样式,amazing!!!
 //html 的table 是表格 ,tr是表格的一行,th是表头,td是表的单元格
 //注意用 echo 要把HTML语句打完整,有头有尾</table></table>,注意一下
 //border=“1” 是设置表的边框
echo "<table border='1'>
<tr>
<th>ID</th>
<th>垃圾</th>
<th>分类</th>
</tr>";
 
//这个 while 循环很精髓,打印表格必备  $row[]括号里面写的是数据库的列名,需要哪一列写哪一列
//那个格式要写对,不要漏点,漏引号之类的
while($row = mysqli_fetch_array($result))
{
    echo "<tr>";
    echo "<td>" . $row['litter_id'] . "</td>";
    echo "<td>" . $row['litter_name'] . "</td>";
    echo "<td>" . $row['litter_style'] . "</td>";
    echo "</tr>";
}
echo "</table>";
 
mysqli_close($con);//有始有终,又开有关,释放资源
?>

数据库方面
在这里插入图片描述
代码里面有解析,讲得很详细了哈,HTML文件和PHP文件要放在同一个目录下,这个不需要我说了吧,要不然的话,函数那个PHP路径也要改,./ …/ 上级目录,上上级目录这些之类的不讲了

安装MySQL,数据库建表,插入数据什么这一类的,还有MySQL语句啥的应该不需要我了吧,那太多东西了,见好就收哈,有问题可以问,本人水平那就那样,能解答就解答
-----------------------===--------------------------------------------------------------------------------------------------------------

如果以上有哪里不对,或者有错的欢迎指正,emmmmm

最后推荐一下
学习制作网页的话,我觉得三个网站比较不错,菜鸟教程, w3school ,PHP中文网,很多干货,希望对你们学习有帮助,嘻嘻嘻

  • 115
    点赞
  • 504
    收藏
    觉得还不错? 一键收藏
  • 31
    评论
HTMLPHPMySQL是一种常见的Web开发技术组合,可以用于创建动态网站和Web应用程序。下面是一个简单HTML+PHP+MySQL交互页面的例子: HTML页面代码: ```html <!DOCTYPE html> <html> <head> <title>HTML+PHP+MySQL交互页面</title> </head> <body> <h1>查询用户信息</h1> <form action="query.php" method="post"> <label for="name">姓名:</label> <input type="text" name="name" id="name"> <input type="submit" value="查询"> </form> </body> </html> ``` PHP代码(query.php): ```php <?php // 连接MySQL数据库 $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 获取HTML页面提交的查询条件 $name = $_POST["name"]; // 查询数据库 $sql = "SELECT id, name, age, email FROM MyGuests WHERE name='$name'"; $result = $conn->query($sql); // 输出查询结果 if ($result->num_rows > 0) { echo "<table><tr><th>ID</th><th>姓名</th><th>年龄</th><th>邮箱</th></tr>"; while($row = $result->fetch_assoc()) { echo "<tr><td>".$row["id"]."</td><td>".$row["name"]."</td><td>".$row["age"]."</td><td>".$row["email"]."</td></tr>"; } echo "</table>"; } else { echo "0 结果"; } // 关闭数据库连接 $conn->close(); ?> ``` 这个例子中,HTML页面包含一个输入框一个查询按钮,用户输入姓名后点击查询按钮,HTML页面将数据发送给query.php文件。query.php文件连接MySQL数据库查询符合条件的用户信息,并将查询结果通过HTML页面以表格形式显示出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值