前台提交数据到php mysql_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();

});

}

最终，效果如下：

数据库中的数据：