Bootstrap+jq+jqajax+php+数据库增删改查源码(简化版)
2018-01-17 10:30
295 查看
今天为大家带来的Bootstrap+jq+jqajax+php+数据库增删改查源码(简化版)。
前台
js脚本
后台
db.php
前台
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
.left{
float: left;
}
.right{
float: right;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="header">
<div class="col-lg-6 left">
<input type="text" id="seach"><button id="sea" class="btn bg-info">搜索</button>
</div>
<div class="col-lg-6 right text-right">
<button class="btn bg-info" data-toggle="modal" data-target="#addmyModal">添加</button>
<button id="delAll" class="btn bg-info">批量删除</button>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>选择</th>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
<th>注册时间</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tab"></tbody>
</table>
</div>
</div>
<!--添加-->
<div class="modal fade" id="addmyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">管理员添加</h4>
</div>
<div class="modal-body">
<label>用户名：</label><input type="text" id="username" class="form-control">
<label>密码：</label><input type="password" id="pwd" class="form-control">
<label>年龄：</label><input type="number" id="age" class="form-control">
<label>性别：</label><br>
<input type="radio" name="sex" class="sex" value="男">男
<input type="radio" name="sex" class="sex" value="女">女<br>
<label>电话：</label><input type="tel" id="tel" class="form-control">
<label>时间：</label><input type="text" id="datatime" class="form-control">
<label>爱好：</label><br>
<input type="checkbox" class="like" value="睡觉" >睡觉
<input type="checkbox" class="like" value="玩游戏" >玩游戏
<input type="checkbox" class="like" value="看电视" >看电视
<input type="checkbox" class="like" value="跑步" >跑步
<input type="checkbox" class="like" value="看书" >看书
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="add">添加</button>
</div>
</div>
</div>
</div>
<!--修改-->
<div class="modal fade" id="updmyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">编辑用户信息</h4>
</div>
<div class="modal-body">
<label>用户名：</label><input type="text" id="user" class="form-control">
<label>密码：</label><input type="password" id="pwds" class="form-control">
<label>年龄：</label><input type="number" id="ages" class="form-control">
<label>性别：</label><br>
<input type="radio" name="sex" class="sexs" value="男">男
<input type="radio" name="sex" class="sexs" value="女">女<br>
<label>电话：</label><input type="tel" id="tels" class="form-control">
<label>时间：</label><input type="text" id="datatimes" class="form-control">
<label>爱好：</label><br>
<input type="checkbox" class="love" value="睡觉" >睡觉
<input type="checkbox" class="love" value="玩游戏" >玩游戏
<input type="checkbox" class="love" value="看电视" >看电视
<input type="checkbox" class="love" value="跑步" >跑步
<input type="checkbox" class="love" value="看书" >看书
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="update">保存</button>
</div>
</div>
</div>
</div>
<script src="lib/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script src="lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>js脚本
<script>
//渲染页面
$.ajax({
url:"bc.php",
type:"get",
data:{
action:"get"
},
dataType:"json",
success:function (data) {
$("#tab").append(change(data))
}
})
//增加
$("#add").click(function () {
// console.log(getVal($(".like")))
// console.log(arr,$("#username").val(),$("#pwd").val(),$("#age").val(),$(".sex:checked").val(),$("#tel").val(),$("#datatime").val())
$.ajax({
url:"bc.php",
type:"get",
data:{
action:"add",
username:$("#username").val(),
pwd:$("#pwd").val(),
age:$("#age").val(),
sex:$(".sex:checked").val(),
tel:$("#tel").val(),
datatime:$("#datatime").val(),
love: getVal($(".like"))
},
dataType:"json",
success:function (data) {
if(data.flag==true){
alert("添加成功")
$('#addmyModal').modal('hide')
window.location.reload()
}else {
alert("失败")
$('#addmyModal').modal('hide')
window.location.reload()
}
}
})
})
//删除
//单删
$(document).on("click",'#del',function () {
console.log( $(this).attr('title'))
$.ajax({
url:"bc.php",
type:"get",
data:{
action:"del",
id: $(this).attr('title'),
},
dataType:"json",
success:function (data) {
if(data.flag==true){
alert("删除成功")
window.location.reload()
}
}
})
})
//批量删除
$("#delAll").click(function () {
console.log(getVal($(".che")))
$.ajax({
url:"bc.php",
type:"get",
data:{
action:"delall",
id:getVal($(".che")),
},
dataType:"json",
success:function (data) {
if(data.flag==true){
alert("删除成功")
window.location.reload()
}else {
alert("删除失败")
window.location.reload()
}
}
})
})
//查找
$('#sea').click(function () {
console.log($("#seach").val())
$.ajax({
url:"bc.php",
type:"get",
data:{
action:"search",
txt:$("#seach").val()
},
dataType:"json",
success:function (data) {
console.log(data)
$("#tab").html(change(data));
// window.location.reload()
}
})
})
//修改
//1.先查找
var id=0;
$(document).on('click','#upd',function () {
id=$(this).attr('title')
// console.log(id);
$.ajax({
url:"bc.php",
data:{
action:"upd",
id:id
},
dataType:"json",
success:function (data) {
$("#user").val(data[0].username)
$("#pwds").val(data[0].pwd)
if(data[0].sex=="男"){
$(".sexs").eq(0).attr("checked",true)
}else if(data[0].sex=="女"){
$(".sexs").eq(1).attr("checked",true)
}
$("#ages").val(data[0].age)
$("#tels").val(data[0].tel)
$("#datatimes").val(data[0].dates)
$($(".likes")).val(setChecked(data[0].love))
}
})
})
//2.在修改
$("#update").click(function () {
console.log(getVal($(".love")))
// console.log($("#user").val(),$("#pwds").val(),$("#ages").val(),$(".sexs:checked").val(),$("#tels").val(),$("#datatimes").val())
$.ajax({
url:"bc.php",
type:"get",
data:{
action:"update",
id:id,
username:$("#user").val(),
pwd:$("#pwds").val(),
age:$("#ages").val(),
sex:$(".sexs:checked").val(),
tel:$("#tels").val(),
datatime:$("#datatimes").val(),
love: getVal($(".love"))
},
dataType:"json",
success:function (data) {
$('#updModal').modal('hide')
window.location.reload()
}
})
})
function change(data) {
var html=""
$(data).each(function (i,v) {
html+=" <tr>\n" +
"<td><input type=\"checkbox\" class=\"che\" value="+data[i].id+"></td>" +
"<td>"+data[i].id+"</td>\n" +
"<td>"+data[i].username+"</td>\n" +
"<td>"+data[i].pwd+"</td>\n" +
"<td>"+data[i].age+"</td>\n" +
"<td>"+data[i].sex+"</td>\n" +
"<td>"+data[i].tel+"</td>\n" +
"<td>"+data[i].dates+"</td>\n" +
"<td>"+data[i].love+"</td>\n" +
"<td>\n" +
"<button id=\"del\" title="+data[i].id+">删除</button>\n" +
"<button id=\"upd\" title="+data[i].id+" data-toggle='modal' data-target='#updmyModal'>修改</button>\n" +
"</td>\n" +
"</tr>"
})
return html
}
//获取多选框的值
function getVal(str) {
var arr=[]
for (var i=0;i<str.length;i++){
if(str[i].checked){
arr.push(str[i].value)
}
}
return arr.join(",")
console.log(arr)
}
//多选框默认选中
function setChecked(str) {
var arr=str.split(",");
for (var i=0;i<arr.length;i++){
if(arr[i]=="睡觉"){
$(".love").eq(0).attr("checked",true)
}else if(arr[i]=="玩游戏"){
$(".love").eq(1).attr("checked",true)
} else if(arr[i]=="看电视"){
$(".love").eq(2).attr("checked",true)
}else if(arr[i]=="跑步"){
$(".love").eq(3).attr("checked",true)
}else if(arr[i]=="看书"){
$(".love").eq(4).attr("checked",true)
}
}
}
</script>后台
<?php
/**
* Created by PhpStorm.
* User: ASUS
* Date: 2018/1/12
* Time: 16:58
*/
require ("lib/DB.php");
$mysql=new mysqldb();
//渲染页面
if($_REQUEST['action']=="get"){
$spl="select * from admin";
$con=$mysql->query($spl);
echo $con;
}
//添加
elseif ($_REQUEST['action']=="add"){
$username=$_REQUEST['username'];
$pwd=$_REQUEST['pwd'];
$age=$_REQUEST['age'];
$sex=$_REQUEST['sex'];
$tel=$_REQUEST['tel'];
$datatime=$_REQUEST['datatime'];
$love=$_REQUEST['love'];
if($username==""){
echo"<script>alert('不能为空')</script>";
}else{
$spl="insert into admin (username,pwd,age,sex,tel,dates,love)VALUES ('$username','$pwd','$age','$sex','$tel','$datatime','$love')";
}
$con=$mysql->update($spl);
echo $con;
}
//删除
elseif ($_REQUEST['action']=='del'){
$id=$_REQUEST['id'];
$spl="delete from admin where id=$id";
$con=$mysql->update($spl);
echo $con;
}
//批量删除
elseif ($_REQUEST['action']=='delall'){
$id=$_REQUEST['id'];
$spl="delete from admin where id in($id)";
$con=$mysql->update($spl);
echo $con;
}
//查找
elseif ($_REQUEST['action']=='search'){
$seach=$_REQUEST['txt'];
$spl="select * from admin WHERE concat(id,username,pwd,age,sex,tel,dates,love) LIKE '%$seach%'";
$con=$mysql->query($spl);
echo $con;
}
//修改
elseif ($_REQUEST['action']=='upd'){
$id=$_REQUEST['id'];
$spl="select * from admin WHERE id=$id";
$con=$mysql->query($spl);
echo $con;
}
elseif ($_REQUEST['action']=='update'){
$id=$_REQUEST['id'];
$username=$_REQUEST['username'];
$pwd=$_REQUEST['pwd'];
$age=$_REQUEST['age'];
$sex=$_REQUEST['sex'];
$tel=$_REQUEST['tel'];
$datatime=$_REQUEST['datatime'];
$love=$_REQUEST['love'];
$spl="update admin set username='$username',pwd='$pwd',age='$age',sex='$sex',tel='$tel',dates='$datatime' WHERE id=$id";
$con=$mysql->query($spl);
echo $con;
}db.php
<?php
header("Content-Type:Text/html;charset=UTF-8");
class Mysqldb{
//创建属性
private $conn;
public function __construct($host='localhost',$user='root',$pwd='root',$database='test'){
$this->conn=mysqli_connect($host,$user,$pwd,$database);
if($this->conn){
$this->conn->set_charset('utf8');
}
}
public function query($sql){
$result=mysqli_query($this->conn,$sql);
$arr=array();
while($row=mysqli_fetch_array($result)){
array_push($arr,$row);
}
mysqli_free_result($result);
return json_encode($arr);
}
public function update($sql){
$result=mysqli_query($this->conn,$sql);
$arr=array();
if($result){
$arr['flag']=true;
$arr['msg']='操作成功';
}else{
$arr['flag']=false;
$arr['msg']='操作失败';
}
return json_encode($arr);
}
public function __destruct(){
mysqli_close($this->conn);
$this->conn=null;
}
}
?>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Bootstrap+jq+jqajax+php+数据库增删改查源码(跳转页面版)
- Bootstrap+jq+jqajax+php+数据库增删改查源码
- PHP+JQ+AJAX+json 数据库实时动态增删改查
- php 输出数据库取出来的html源码 正常显示解决,替换显示数据库中的html代码
- 基于数据库、php、ajax的 3级地区联动
- ajax-jq-php(mysql)四级省市级联
- PHP程序中使用PDO对象实现对数据库的增删改查操作的示例代码
- php源码安装、简单配置、测试及连接数据库
- PHP连接数据库（注冊页面的增删改查）
- php将图片保存到mysql数据库及从数据库中读取图片的方法源码
- PHP程序中使用PDO对象实现对数据库的增删改查操作的示例代码
- php实现数据库的增删改查
- php+ajax实现带进度条的大数据排队导出思路以及源码
- [Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
- PHP 中对MySql 数据库的增删改查
- jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
- php jq ajax
- 【php】数据库的增删改查和php与javascript之间的交互
- jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载
- ios开发-数据库网络之用php对mysql的增删改查(6)