数据库修改后 前台同步更新 php,PHP实现前台页面与MySQL的数据绑定、同步更新...
今天我来给大家介绍一个PHP-MySQL的小项目。
使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增、删等操作语句功能。
如果有问题,欢迎拍砖~ 有不懂的地方,提出来咱们一起探讨~
首先,我们先做好前台HTML、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;
}
用户管理系统
用户Id用户名密码真实姓名操作
// 增加数据时使用
接下来我们需要实现的功能是,在每次更改数据或者刷新页面的时候,都可以将数据库的数据显示到网页页面中。
我们做一个纯PHP文件,命名doshowUserList.php,文件中代码如下:
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,代码如下:
// 连接数据库的同时,直接检测数据库连接是否成功
$conn = @mysqli_connect(HOST, USERNAME, PASSWOED, DBNAME) or die("数据库连接失败!".mysqli_connect_error()."");
// 设置字符集编码
@mysqli_set_charset($conn, CHARSET) or die("字符集编码设置失败!");
后台的PHP文件写好以后我们需要在前台声明一个函数 getData(),在函数体内使用ajax引入doShowUserList.php,前台JS代码如下:
getData();
});//获取数据 html中显示tbody内容的代码 采用ES6的反引号``可以直接在``中按照H5的形式写代码,比拼串的写法更简洁、更容易看
functiongetData(){
$.post("admin/doShowUserList.php",function(data){var html =``;for (var i = 0; i < data.length; i++) {var user =data[i];
html+=`
${user.id}${user.name}${user.pwd}${user.trueName}
删除
`;
}
$("#table tbody").html(html);
},"json");
}
获取数据功能实现了,接下来我们实现增加数据的功能,按照上面的套路,我们首先新建一个PHP文件,命名为doAddUser.php,代码如下:
// $_POST 取到前台对象user 的键名
$name = $_POST["username"];$pwd = $_POST["pwd"];$trueName = $_POST["trueName"];$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代码如下:
//新增数据
functionaddUser(){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(); 代码分别如下显示:
delete from `user` where id= {$id};
sql;$isOk = mysqli_query($conn, $sql);if($isOk){echo "true";
}else{echo "false";
}
//删除数据
functiondelUser(id){
$.post("admin/doDelUser.php",{"id":id},function(data){if (data == "true") {
alert("删除成功!")
}else{
alert("删除失败!")
}
getData();
});
}
最终,效果如下:
数据库中的数据:
原文:http://www.cnblogs.com/Tracey-1023/p/7819225.html
数据库修改后 前台同步更新 php,PHP实现前台页面与MySQL的数据绑定、同步更新...相关推荐
- vue从后台获取新数据后刷新_vue项目中实现定时刷新页面(重新渲染数据实时更新)...
需求: 每隔一分钟自动刷新一下当前页面,同时发送请求,重新渲染数据,以到达实时更新. 开始: js有两种定时器 setInterval(function(){}, milliseconds)--会不停 ...
- 数据库修改后Hibernate的配置更新
<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>< ...
- PHP实现前台页面与MySQL的数据绑定、同步更新
今天我来给大家介绍一个PHP-MySQL的小项目. 使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增.删等操作语句功能. 如果有问题,欢迎拍砖~ 有不懂的地方,提出来咱们一起探讨~ ...
- html修改后页面不更新
html修改后页面不更新 记录一下自己之前修改前端代码中遇到的问题,html中的代码进行修改但是页面没有及时更新. 如果不关闭Thymeleaf缓存,可能会出现以下情况: 页面无法及时更新:Thyme ...
- Altium AD20原理图从库中更新变动,库中模型修改后同步到原理图中
原理图绘制中难免新的封装会出现一些改动,封装模型在修改后需要重新同步回原理图中. 例如最开始画的图为: 之后觉得封装不好看,或者有些别的问题,对库中的模型进行如下修改. 而这些修改是不会自动同步到所有 ...
- SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后对数据库的更新问题
SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后的同步问题 概括 主要说一下前端的实现 概括 今天在做实训作业时,有个对数据信息进行修改的操作,要求点击修改按钮后弹出修改框,栏目中需要显 ...
- @Transactional注解和Mybatis缓存问题(Mybatis 查询结果 List 对List修改后再次查询,结果与数据库不一致)
Mybatis 查询结果 List 对List修改后再次查询,结果与数据库不一致 使用 Mybatis 查询,结果为对象的 List ,修改List内的参数后,使用相同参数再次查询,发现查询结果与数据 ...
- git创建/合并分支/删除分支/将修改后的内容同步到GitHub远程仓库
1.创建分支并切换到刚创建的分支(这里创建新的分支来修改README.md的内容然后将创建的分支与master分支合并,最后删除创建的分支) $ git checkout -b 分支名 Switche ...
- 服务器数据库密码修改了,服务器密码修改后数据库
服务器密码修改后数据库 内容精选 换一换 将GaussDB(DWS)提供的ODBC DRIVER(psqlodbcw.so)配置到数据源中便可使用.配置数据源需要配置"odbc.ini&qu ...
最新文章
- 什么软件测试身高体重标准,测测你的身高体重指数(BMI)正常吗?
- boost::hana::type_foldl1用法的测试程序
- 17秋 软件工程 团队第五次作业 Alpha Scrum3
- 关于easyui的一些小知识点(1)
- BZOJ5419[Noi2018]情报中心——线段树合并+虚树+树形DP
- 蓝绿部署、滚动部署、灰度发布、金丝雀发布-概念介绍---应用部署001
- IDEA(2018版)实用快捷键整理
- 旅游后台管理系列——SSM框架Web表现层
- 博士申请 | 澳门大学张一博教授课题组招收计算机视觉方向全奖博士生
- E45: ‘readonly‘ option is set (add ! to override)解决办法
- 微信公众平台开发实例 php,php微信公众平台开发类实例,php公众平台实例_PHP教程...
- Android 屏幕旋转 全解析
- samba 配置文件详解
- 【文本】HTML5 Canvas小项目:为坐标轴添加数字标签(带刻度线)
- 编辑为什么建议转投_编辑回信解读 —“建议转投子刊”实例
- 4个高质量站点推荐值得收藏
- 【FCPX插件】56种标题文本输入逐字出现字幕打字机动画效果 Typing Titles,支持M1芯片!
- CPU是如何制造出来的(附高清全程图解)
- vue路由懒加载resolve方式与import方式
- [多图]输入法漏洞再现Windows 8 利用QQ拼音纯净版实现提权