今天为大家带来的Bootstrap+jq+jqajax+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; } } ?>