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

今天我来给大家介绍一个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 /><table id="table">        <thead ><tr><th>用户Id</th><th>用户名</th><th>密码</th><th>真实姓名</th><th>操作</th></tr></thead><tbody></tbody>

<tfoot>      // 增加数据时使用      <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 align="center"><input type="button" onclick="addUser()" value="新增用户" /></td></tr>            </tfoot></table></body>

接下来我们需要实现的功能是，在每次更改数据或者刷新页面的时候，都可以将数据库的数据显示到网页页面中。

我们做一个纯PHP文件，命名doshowUserList.php，文件中代码如下：

<?phpheader("Content-Type:text/html;charset=utf-8");  include_once "mysql.php";   　　// 为了便于后期操作，我们将绑定数据库的代码单独写在另一个PHP文件中，通过导入的方式引入。$sql = <<<sql　　　　　　　　// 准备SQL语句select * from `user`;
sql;$res = mysqli_query($conn, $sql);   // 执行SQL语句$arr=[];while($row=mysqli_fetch_assoc($res)){$arr[]=$row;}$json = json_encode($arr);echo $json;mysqli_free_result($res);mysqli_close($conn);

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

<?phpheader("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代码如下：

<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){     // 在文档DOM加载完后，就自动获取一遍数据   getData();});// 获取数据  html中显示tbody内容的代码 采用ES6的反引号``可以直接在``中按照H5的形式写代码，比拼串的写法更简洁、更容易看function getData(){$.post("admin/doShowUserList.php",function(data){var html = ``;for (var i = 0; i < data.length; i++) {var user =    data[i];html += `<tr>                                           <td>${user.id}</td><td>${user.name}</td><td>${user.pwd}</td><td>${user.trueName}</td><td align = "center"><a οnclick="delUser(${user.id})" href="">删除</a></td></tr>
                            `;    }$("#table tbody").html(html);},"json");}
</script>

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

<?phpheader("Content-Type:text/html;charset=utf-8");include_once 'mysql.php';// $_POST 取到前台对象user 的键名

$name = $_POST["username"];$pwd = $_POST["pwd"];$trueName = $_POST["trueName"];$sql = <<<sql      insert into `user`       values(null,"{$name}","{$pwd}","{$trueName}");
sql;$isOk = mysqli_query($conn, $sql);if($isOk){echo "true";}else{echo "false";}

在前台声明一个函数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(); 代码分别如下显示：

<?phpheader("Content-Type:textml;charset=utf-8");include_once "mysql.php";$id=$_POST["id"];$sql = <<<sqldelete from `user` where id = {$id};
sql;$isOk = mysqli_query($conn, $sql);if($isOk){echo "true";}else{echo "false";}

// 删除数据        function delUser(id){$.post("admin/doDelUser.php",{"id":id},function(data){if (data == "true") {alert("删除成功！")} else{alert("删除失败！")                    }            getData();                });}

最终，效果如下：

数据库中的数据：

转载于:https://www.cnblogs.com/Tracey-1023/p/7819225.html

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

数据库修改后前台同步更新 php,PHP实现前台页面与MySQL的数据绑定、同步更新...
今天我来给大家介绍一个PHP-MySQL的小项目. 使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增.删等操作语句功能. 如果有问题,欢迎拍砖~ 有不懂的地方,提出来咱们一起探讨~ ...
layui实现前台页面和后台数据库的同步修改和删除操作
首先来看看展示效果吧: 如下图,点击编辑按钮,弹出修改信息的框,将信息修改后,点击确定按钮,实现后台数据库和前台页面同时修改成我们在框内重新写的值: 修改功能的前后台代码如下 : 前台页面:Index ...
mysql数据没有同步更新_MySQL数据库主从没有同步的两种解决方案
MySQL数据库主从没有同步的两种解决方案发布时间:2020-05-13 13:54:57 来源:亿速云阅读:190 作者:三月栏目:数据库下文主要给大家带来MySQL数据库主从没有同步的两种 ...
mysql数据没有同步更新_解决MySQL的主从数据库没有同步的两种方法
问题今天发现Mysql的主从数据库没有同步先上Master库: mysql>show processlist; 查看下进程是否Sleep太多.发现很正常. show master statu ...
【SpringBoot】65、SpringBoot整合Canal+RabbitMQ监听MySQL实现数据同步更新Redis缓存
canal 简介早期阿里巴巴因为杭州和美国双机房部署,存在跨机房同步的业务需求,实现方式主要是基于业务 trigger 获取增量变更.从 2010 年开始,业务逐步尝试数据库日志解析获取增量变更进行 ...
mysql 同步更新_MySQL slave 不能同步更新
MySQL slave 不能同步更新 mysql slave server 上进程停止重启后不接收 master上的更新 mysql>show slave status\G; ***** ...
用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能之前台页面
首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...
Node.js Express博客项目实战之前台页面数据的显示
前台页面数据通过连接数据库信息将数数据显示在页面上: 最终实现的效果: 前台的路由: 1 // 导入express 2 3 let express = require("express&qu ...
php伪静态网前台页面,如何让Discuz门户频道页支持伪静态
Discuz是一款功能很强大的php+mysql的论坛cms,其界面,安全性,功能都得到广大用户的一致好评.Discuz的门户功能很不错,它摆脱了单一的论坛模式,是网站看起来更加的完整.可是,门户有个 ...

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

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

最新文章

热门文章