Bootstrap+jq+jqajax+php+数据库增删改查源码(跳转页面版)
2018-01-17 12:16
603 查看
今天为大家带来的Bootstrap+jq+jqajax+php+数据库增删改查源码(跳转页面)。
添加页面
展示页面
修改页面
后台
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>
.mt{
margin-top: 10px;
}
</style>
<body>
<div class="container ">
<h3 class="text-center">用户添加</h3>
<!--用户名-->
<div class="row mt">
<div class="col-lg-2 text-right">用户名</div>
<div class="col-lg-10"><input type="text" class="form-control" id="username"></div>
</div>
<!--密码-->
<div class="row mt">
<div class="col-lg-2 text-right">密码</div>
<div class="col-lg-10"><input type="password" class="form-control" id="pwd"></div>
</div>
<!--性别-->
<div class="row mt">
<div class="col-lg-2 text-right">性别</div>
<div class="col-lg-10">
<input type="radio" class=" sex" name="sex" value="男" >男
<input type="radio" class=" sex" name="sex" value="女" >女
</div>
</div>
<!--爱好-->
<div class="row mt">
<div class="col-lg-2 text-right">爱好</div>
<div class="col-lg-10">
<input type="checkbox" class="like" value="玩游戏">玩游戏
<input type="checkbox" class="like" value="跑步">跑步
<input type="checkbox" class="like" value="打篮球">打篮球
</div>
</div>
<div class="row mt ">
<div class="col-lg-12 text-right">
<button class="btn" id="add">添加</button>
<input type="reset" value="重置" class="btn">
</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>
<script>
//获取复选框的值
$("#add").click(function () {
var arr=[]
for (var i=0;i<$(".like").length;i++){
if($(".like")[i].checked){
arr.push($(".like")[i].value)
}
}
console.log($("#username").val(),$("#pwd").val(),$(".sex:checked").val(),arr.join(","))
$.get({
url:"index.php",
data:{
action:"add",
username:$("#username").val(),
pwd:$("#pwd").val(),
sex:$(".sex:checked").val(),
like:arr.join(",")
},
dataType:"json",
success:function (data) {
window.location.href="show.html"
}
})
})
</script>展示页面
<!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>学生信息</title>
<link href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1>学生信息</h1>
<input type="text" id="search">
<button class="btn" id="sel">搜索</button>
当前页面显示<select id="select1">
<option selected>--请选择--</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
</select>条数据
149bd
<table class="table table-bordered">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>学生姓名</th>
<th>密码</th>
<th>性别</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tab"></tbody>
</table>
<button href="add.html" class="btn" id="add">添加</button>
<button class="btn" id="delAll" >批量删除</button>
</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>
<script>
//渲染页面
$.ajax({
url:"index.php",
data:{
action:"get"
},
dataType:"json",
success:function(data){
var html=""
$(data).each(function (i,v) {
html+="<tr>"
html+="<td><input type='checkbox' title='"+data[i].id+"' class='che'></td>"
html+="<td>"+data[i].username+"</td>"
html+="<td>"+data[i].pwd+"</td>"
html+="<td>"+data[i].sex+"</td>"
html+="<td>"+data[i].love+"</td>"
html+="<td>" +
"<button id='del' title='"+data[i].id+"'>删除</button>" +
"<button id='upd' title='"+data[i].id+"' data-toggle='modal' data-target='#upmyModal'>修改</button>" +
"</td>"
html+="</tr>"
})
$("#tab").append(html)
}
})
$("#add").click(function () {
window.location.href="add.html"
})
// 删
//单删
$(document).on("click","#del",function () {
// console.log($(this).attr("title"))
$.ajax({
url:"index.php",
data:{
action:"del",
id:$(this).attr("title")
},
dataType:"json",
success:function (data) {
// console.log(data)
window.location.reload()
$(this).parents().remove()
}
})
})
//批量删除
$("#delAll").click(function () {
//获取复选框的值
//声明数组用来存储复选框的选中值
var arr=[]
for(var i=0;i<$(".che").length;i++){
if($(".che")[i].checked){
arr.push($(".che")[i].title)
}
}
c
$.ajax({
url:"index.php",
data:{
action:"del",
id:arr.join(",")
},
dataType:"json",
cache:false,
success:function (data) {
// console.log(data)
window.location.reload()
$(this).parent().remove()
}
})
})
// 改
//先查找
$(document).on('click','#upd',function () {
window.location.href="update.html?="+$(this).attr("title")
})
//在修改
$("#update").click(function () {
// alert(1)
var arr=[]
for (var i=0;i<$(".likes").length;i++){
if($(".likes")[i].checked){
arr.push($(".likes")[i].value)
}
}
// console.log($("#username").val(),$("#pwd").val(),$(".sex").val(),arr.join(","))
$.ajax({
url:"index.php",
data:{
action:"update",
id:$("#ids").val(),
username:$("#user").val(),
pwd:$("#pwds").val(),
sex:$(".sexs:checked").val(),
like:arr.join(",")
},
dataType:"json",
success:function (data) {
$("#upmyModal").modal("hide")
window.location.reload()
// console.log(data)
}
})
})
// 查
$("#sel").click(function () {
alert($("#search").val())
$.ajax({
url:"index.php",
data:{
action:"query",
username:$("#search").val()
},
dataType:"json",
success:function (data) {
$(data).each(function (i,v) {
var html=""
$(data).each(function (i,v) {
html+="<tr>"
html+="<td><input type='checkbox' title='"+data[i].id+"' class='che'></td>"
html+="<td>"+data[i].username+"</td>"
html+="<td>"+data[i].pwd+"</td>"
html+="<td>"+data[i].sex+"</td>"
html+="<td>"+data[i].love+"</td>"
html+="<td>" +
"<button id='del' title='"+data[i].id+"'>删除</button>" +
"<button id='upd' title='"+data[i].id+"' data-toggle='modal' data-target='#upmyModal'>修改</button>" +
"</td>"
html+="</tr>"
})
$("#tab").html(html)
})
}
})
})
//按条件查询
$("#select1").change(function () {
// console.log($(this).val())
$.ajax({
url:"index.php",
data:{
action:"limits",
username:$(this).val()
},
dataType:"json",
success:function (data) {
console.log(data)
$(data).each(function (i,v) {
var html=""
$(data).each(function (i,v) {
html+="<tr>"
html+="<td><input type='checkbox' title='"+data[i].id+"' class='che'></td>"
html+="<td>"+data[i].username+"</td>"
html+="<td>"+data[i].pwd+"</td>"
html+="<td>"+data[i].sex+"</td>"
html+="<td>"+data[i].love+"</td>"
html+="<td>" +
"<button id='del' title='"+data[i].id+"'>删除</button>" +
"<button id='upd' title='"+data[i].id+"' data-toggle='modal' data-target='#upmyModal'>修改</button>" +
"</td>"
html+="</tr>"
})
$("#tab").html(html)
})
}
})
})
//多个条件
</script>修改页面
<!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>
<body>
<div class="container ">
<h3 class="text-center">用户编辑</h3>
<!--用户名-->
<div class="row mt">
<div class="col-lg-2 text-right">用户名</div>
<div class="col-lg-10">
<input type="text" class="form-control" id="username">
</div>
</div>
<!--密码-->
<div class="row mt">
<div class="col-lg-2 text-right">密码</div>
<div class="col-lg-10"><input type="password" class="form-control" id="pwd"></div>
</div>
<!--性别-->
<div class="row mt">
<div class="col-lg-2 text-right">性别</div>
<div class="col-lg-10">
<input type="radio" class=" sex" name="sex" value="男" >男
<input type="radio" class=" sex" name="sex" value="女" >女
</div>
</div>
<!--爱好-->
<div class="row mt">
<div class="col-lg-2 text-right">爱好</div>
<div class="col-lg-10">
<input type="checkbox" class="like" value="玩游戏">玩游戏
<input type="checkbox" class="like" value="跑步">跑步
<input type="checkbox" class="like" value="打篮球">打篮球
</div>
</div>
<div class="row mt ">
<div class="col-lg-12 text-right">
<button class="btn" id="add">保存</button>
<input type="reset" value="重置" class="btn">
</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>
<script>
var arr=window.location.search.split("=").pop();
$.ajax({
url:"index.php",
data:{
action:"upd",
id:arr
},
dataType:"json",
success:function (data) {
console.log(data)
$("#ids").val(data[0].id);
$("#username").val(data[0].username);
$("#pwd").val(data[0].pwd)
// console.log(data[0].sex)
if(data[0].sex=="男"){
$(".sex").eq(0).attr("checked",true)
}else {
$(".sex").eq(1).attr("checked",true)
}
// console.log(.join(","))
//因为data[0].love是字符串所以要转换成数然后进行判断
var str=data[0].love
var arr=str.split(",")
for (var i=0;i<arr.length;i++){
// console.log(arr[i])
if(arr[i]=="玩游戏"){
$(".like").eq(0).attr("checked",true)
}else if(arr[i]=="跑步"){
$(".like").eq(1).attr("checked",true)
}else if(arr[i]=="打篮球"){
$(".like").eq(2).attr("checked",true)
}
}
}
})
$("#add").click(function () {
// alert(1)
var arr=[]
for (var i=0;i<$(".like").length;i++){
if($(".like")[i].checked){
arr.push($(".like")[i].value)
}
}
// console.log($("#username").val(),$("#pwd").val(),$(".sex").val(),arr.join(","))
$.ajax({
url:"index.php",
data:{
action:"update",
id:$("#ids").val(),
username:$("#username").val(),
pwd:$("#pwd").val(),
sex:$(".sex:checked").val(),
like:arr.join(",")
},
dataType:"json",
success:function (data) {
window.location.href="show.html"
// console.log(data)
}
})
})
</script>后台
<?php
/**
* Created by yangweishuo.
* User: ASUS
* Date: 2018/1/10
* Time: 16:11
*/
require("lib/DB.php");
$sqls=new Mysqldb();
//渲染页面
if($_REQUEST['action']=='get'){
$sql="select * from student";
$con=$sqls->query($sql);
echo $con;
}
//添加
else if($_REQUEST['action']=='add'){
$username=$_REQUEST['username'];
$pwd=$_REQUEST['pwd'];
$sex=$_REQUEST['sex'];
$love=$_REQUEST['like'];
$sql="insert into student (username,pwd,sex,love)VALUES ('$username','$pwd','$sex','$love')";
$con=$sqls->update($sql);
echo $con;
}
//删除
else if($_REQUEST['action']=='del'){
$id=$_REQUEST['id'];
$sql="delete from student where id=$id";
$con=$sqls->update($sql);
echo $con;
}
//批量删除
else if($_REQUEST['action']=='del'){
$id=$_REQUEST['id'];
$sql="delete from student where id in('$id')";
$con=$sqls->update($sql);
echo $con;
}
//修改
//先cha查找
else if($_REQUEST['action']=='upd'){
$id=$_REQUEST['id'];
$sql="select * from student where id='$id'";
$con=$sqls->query($sql);
echo $con;
}
else if($_REQUEST['action']=='update'){
$id=$_REQUEST['id'];
$username=$_REQUEST['username'];
$pwd=$_REQUEST['pwd'];
$sex=$_REQUEST['sex'];
$love=$_REQUEST['like'];
$sql="update student set username='$username',pwd='$pwd',sex='$sex',love='$love' WHERE id=$id";
$con=$sqls->update($sql);
echo $con;
}
//按条件查找
if($_REQUEST['action']=='query'){
$username=$_REQUEST['username'];
$sql="select * from student WHERE concat(username,pwd,sex,love) LIKE '%$username%'";
$con=$sqls->query($sql);
echo $con;
}
if($_REQUEST['action']=='limits'){
$username=$_REQUEST['username'];
$sql="select * from student limit $username";
$con=$sqls->query($sql);
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 数据库实时动态增删改查
- Android数据库的增删改查和ListView以及页面跳转的实现
- 让Bootstrap的dataTable在重新设置了查询条件后进行不跳转页面ajax刷新
- PHP连接数据库（注册页面的增删改查）
- 数据库增删改查（利用重定向和转发实现页面的跳转）
- PHP Action中跳转到别的方法、页面中点击链接跳转到ACtion中方法、AJAX提交传参给ACTION
- PHP 新闻列表实例(数据库读取 删除数据,页面跳转)
- PHP连接数据库实现注册页面的增删改查操作
- PHP连接数据库实现注册页面的增删改查操作
- PHP连接数据库（注冊页面的增删改查）
- form 登陆跳转页面练习（未连接数据库）和连接数据库版
- 动态增删输入框和下拉列表框源代码------下拉列表值从数据库取得（Ajax）
- 关于ajax请求后台接口无法进行页面跳转的问题
- PHP实现页面跳转方法
- php学习笔记（三十二）ajax结合pageView类实现页面无刷新请求
- php可用的跳转页面语句
- html中的a标签用js来实现页面跳转的功能（php分页时做的页面跳转）
- php中页面跳转部分方法论述