今天我来给大家介绍一个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,文件中代码如下:

<?php

    header("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,代码如下:

<?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代码如下:

<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 onclick="delUser(${user.id})" href="">删除</a>
</td>
</tr>
`;
} $("#table tbody").html(html);
},"json");
}
</script>

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

<?php
header("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();  代码分别如下显示:

<?php

    header("Content-Type:textml;charset=utf-8");

    include_once "mysql.php";

    $id=$_POST["id"];

    $sql = <<<sql
delete 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();
}); }

最终,效果如下:

数据库中的数据:

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

  1. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面

    首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...

  2. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面

    首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...

  3. MVC前台页面做登录验证

    最近接触了一个电商平台的前台页面,需要做一个登录验证,具体情况是:当用户想要看自己的订单.积分等等信息,就需要用户登录之后才能查询,那么在MVC项目中我们应该怎么做这个前台的验证呢? 1.我在Cont ...

  4. MVC 从后台页面 取前台页面传递过来的值的几种取法

      MVC 从后台页面 取前台页面传递过来的值的几种取法   <1>前台页面 Index视图 注意:用户名表单的name值为txtName 密码表单的name值为txtPassword & ...

  5. EF更新,数据库值变化,前台页面并不变化,刷新也不变化,重新运行程序则变化----开发中遇到的问题(已解决)

    首先说一下我遇到这个情况的代码情景,首先上错误代码 UserInfo userInfo = Session["UserInfo"] as UserInfo; ); 这段代码所呈现的 ...

  6. ASP.NET MVC中从后台控制器(Controller)传递数据到前台页面视图(View)方式

    方式一: 数据存储模型Model: public class CalendarEvent { public string id { get; set; } public DateTime start ...

  7. 前台页面验证中需要注意的一个与VARCHAR2(N BYTE)和VARCHAR2(N CHAR)的小细节

    1:一个小的测试实例 CREATE TABLE SALES.TEST_ ( TEST_BYTE BYTE), TEST_CHAR CHAR) )--TABLE CREATED ')--1 ROW IN ...

  8. 前台页面Josn 数组在后台.cs代码中的解析

    后台代码: //解析jObject字符串 json_wang 2015/01/27 //var passengerListStr = BookingTicket_PassengerList_Hidde ...

  9. 使用spring webflow,在前台页面中如何显示后端返回的错误信息

    刚刚接触spring webflow,相关的资料并不是很多,并且大都是那种入门的 .xml文件的配置. 用到的CAS 最新的4.0版本用的就是web-flow流,前台页面使用的是表单提交.于是我就碰到 ...

随机推荐

  1. Django内置的用户认证

    认证登陆 在进行用户登陆验证的时候,如果是自己写代码,就必须要先查询数据库,看用户输入的用户名是否存在于数据库中: 如果用户存在于数据库中,然后再验证用户输入的密码,这样一来就要自己编写大量的代码. ...

  2. String Problem hdu 3374 最小表示法加KMP的next数组

    String Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  3. Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)ABCD

    A. Arpa and a research in Mexican wave time limit per test 1 second memory limit per test 256 megaby ...

  4. 实现径向变换用于样本增强《Training Neural Networks with Very Little Data-A Draft》

    背景: 做大规模机器学习算法,特别是神经网络最怕什么--没有数据!!没有数据意味着,机器学不会,人工不智能!通常使用样本增强来扩充数据一直都是解决这个问题的一个好方法. 最近的一篇论文<Trai ...

  5. NSString与NSMutableString的浅拷贝与深拷贝

    浅拷贝:指针拷贝,指针与原指针地址相同,没有创建新的对象. 深拷贝:内容拷贝,创建了新的对象,指针地址与原对象的指针地址不同. NSString测试代码如下 打印结果如下(后面打印出的两个NSCFCo ...

  6. javascript Dom 编程

     javascript Dom  编程 知识概要: (1)Dom是什么? (2)Dom结构模型 (3)XML DOM和 HTML DOM (4)NODE接口的特性和方法 (5)DOM结点的常用属性 ...

  7. ASP.NET/MVC 配置log4net启用写错误日志功能

    <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NET 应用程序的详细信息,请访 ...

  8. c# 图片转二进制/字符串 二进制/字符串反转成图片

    protected void Button1_Click(object sender, EventArgs e) { //图片转二进制 byte[] imageByte = GetPictureDat ...

  9. 即时通信系统Openfire分析之六:路由表 RoutingTable

    还是从会话管理说起 上一章,Session经过预创建.认证之后,才正常可用.认证时,最重要的操作,就是将Session加入到路由表,使之拥用了通信功能. 添加到至路由表的操作,是在SessionMan ...

  10. es6的箭头函数

    1.使用语法 : 参数 => 函数语句; 分为以下几种形式 : (1) ()=>语句 (  )=> statement 这是一种简写方法省略了花括号和return 相当于 ()=&g ...