PHP实现前台页面与MySQL的数据绑定、同步更新

弘毅 · 发表于 2019-6-18 03:45:31

　　今天我来给大家介绍一个PHP-MySQL的小项目。
　　使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增、删等操作语句功能。
　　如果有问题，欢迎拍砖~ 有不懂的地方，提出来咱们一起探讨~
　　首先，我们先做好前台HTML、CSS样式，代码如下：
　　

<head>
　　<meta charset="utf-8" />
　　<title>主页</title>
　　<style type="text/css">
　　#table{
　　width:600px;
　　margin: 20px auto;
　　border-collapse: collapse;
　　}
　　#table thead tr{
　　height: 30px;
　　background-color: orange;
　　color: white;
　　}
　　#table tbody tr{
　　height: 30px;
　　}
　　#table th,td{
　　border: 1px solid black;
　　}
　　#table a{
　　color: dodgerblue;
　　cursor: pointer;
　　}
　　</style>
　　</head>
　　<body>
　　<h1 align="center">用户管理系统</h1>
　　<hr />
　　<thead > [tr] <th>用户Id</th> <th>用户名</th> <th>密码</th> <th>真实姓名</th> <th>操作</th> [/tr] </thead> <tbody></tbody> <tfoot> // 增加数据时使用 </tfoot><table class="t_table"><tbody><tr><td> <input type="text" name="userid" value="id无需输入" disabled="disabled"/> </td><td> <input type="text" name="username"/> </td><td> <input type="text" name="pwd" /> </td><td> <input type="text" name="truename" /> </td><td> <input type="button" onclick="addUser()" value="新增用户" /> </td></tr></tbody></table>
　　</body>

复制代码

　　接下来我们需要实现的功能是，在每次更改数据或者刷新页面的时候，都可以将数据库的数据显示到网页页面中。
　　我们做一个纯PHP文件，命名doshowUserList.php，文件中代码如下：
　　

复制代码

　　PHP连接数据库的PHP文件，命名为mysql.php,代码如下：
　　

<?php
　　header("Content-Type:text/html;charset=utf-8");
　　define("HOST", "127.0.0.1");
　　define("USERNAME", "root");
　　define("PASSWOED", "");
　　define("DBNAME", "mydatabase");
　　define("CHARSET", "utf8");
　　// 连接数据库的同时，直接检测数据库连接是否成功
　　$conn = @mysqli_connect(HOST, USERNAME, PASSWOED, DBNAME) or die("数据库连接失败！<span style='color:red;'>".mysqli_connect_error()."</span>");
　　// 设置字符集编码
　　@mysqli_set_charset($conn, CHARSET) or die("字符集编码设置失败！");

复制代码

　　后台的PHP文件写好以后我们需要在前台声明一个函数 getData()，在函数体内使用ajax引入doShowUserList.php,前台JS代码如下：
　　

复制代码

　　获取数据功能实现了，接下来我们实现增加数据的功能，按照上面的套路，我们首先新建一个PHP文件，命名为doAddUser.php，代码如下：
　

复制代码

　　在前台声明一个函数addUser() ,在函数体内使用ajax引入doAddUser.php,前台JS代码如下：
　　

// 新增数据
　　function addUser(){
　　if($("input[name = 'username']").val()== "" || $("input[name = 'pwd']").val()== "" || $("input[name = 'truename']").val()== ""){
　　alert("新增不可为空！请确认！");
　　return;
　　}
　　var user = {
　　"username" : $("input[name='username']").val(),
　　"pwd" : $("input[name='pwd']").val(),
　　"trueName" : $("input[name='truename']").val(),
　　}
　　$.post("admin/doAddUser.php",user,function(data){
　　if (data == "false") {
　　alert("新增用户失败！")
　　}
　　getData();
　　$("input[name='username']").val("");
　　$("input[name='pwd']").val("");
　　$("input[name='truename']").val("");
　　});
　　}

复制代码

　　最后就是删除功能了，套路同上，新建一个doDelUse.php,在前台声明一个函数delUser(); 代码分别如下显示：
　　

复制代码

　　最终，效果如下：
　　
　　数据库中的数据：
　　

帐号		自动登录	找回密码
密码			加入论坛

-- 友情链接 --