Rumah > Artikel > pembangunan bahagian belakang > Bootstrap+jq+jqajax+php+数据库增删改查源码
Bootstrap+jq+jqajax+php+数据库增删改查源码
- jackloveasal
- 2018-06-15 14:52:422066semak imbas
前台
<!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><p class="container">
<p 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>条数据 <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 class="btn" data-toggle="modal" data-target="#myModal">添加</button>
<button class="btn" id="delAll" >批量删除</button>
</p></p><!-- 添加 --><p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<p class="modal-dialog" role="document">
<p class="modal-content">
<p 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>
</p>
<p class="modal-body">
<label>学生姓名:</label><input type="text" class="form-control" id="username">
<label>密码:</label><input type="password" class="form-control" id="pwd">
<label>性别:</label><br>
<input type="radio" name="sex" class="sex" value="男">男 <input type="radio" name="sex" class="sex" value="女">女<br>
<label>爱好:</label><br>
<input type="checkbox" class="like" value="玩游戏">玩游戏 <input type="checkbox" class="like" value="跑步">跑步 <input type="checkbox" class="like" value="打篮球">打篮球 </p>
<p class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="add">添加</button>
</p>
</p>
</p></p><!-- 修改 --><p class="modal fade" id="upmyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<p class="modal-dialog" role="document">
<p class="modal-content">
<p 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>
</p>
<p class="modal-body">
<input type="hidden" id="ids" class="form-control" value="">
<label>学生姓名:</label><input type="text" class="form-control" id="user">
<label>密码:</label><input type="password" class="form-control" id="pwds">
<label>性别:</label><br>
<input type="radio" name="sex" class="sexs" value="男">男 <input type="radio" name="sex" class="sexs" value="女">女<br>
<label>爱好:</label><br>
<input type="checkbox" class="likes" value="玩游戏">玩游戏 <input type="checkbox" class="likes" value="跑步">跑步 <input type="checkbox" class="likes" value="打篮球">打篮球 </p>
<p class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="update">保存</button>
</p>
</p>
</p><script src="lib/bootstrap-3.3.7-dist/js/jquery-3.2.1.js"></script><script src="lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script></body></html>js
<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 () {
// console.log($(".like").length)
// console.log($(".sex:checked").val());
//获取复选框的值
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:"add",
username:$("#username").val(),
pwd:$("#pwd").val(),
sex:$(".sex:checked").val(),
like:arr.join(",")
},
dataType:"json",
success:function (data) {
$("#myModal").modal("hide")
window.location.reload()
}
})
}) // 删
//单删
$(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)
}
}
$.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 () {
$.ajax({
url:"index.php",
data:{
action:"upd",
id:$(this).attr("title")
},
dataType:"json",
success:function (data) {
console.log(data)
$("#ids").val(data[0].id);
$("#user").val(data[0].username);
$("#pwds").val(data[0].pwd) // console.log(data[0].sex)
if(data[0].sex=="男"){
$(".sexs").eq(0).attr("checked",true)
}else {
$(".sexs").eq(1).attr("checked",true)
} // console.log(.join(","))
var str=data[0].love var arr=str.split(",") for (var i=0;i<arr.length;i++){ // console.log(arr[i])
if(arr[i]=="玩游戏"){
$(".likes").eq(0).attr("checked",true)
}else if(arr[i]=="跑步"){
$(".likes").eq(1).attr("checked",true)
}else if(arr[i]=="打篮球"){
$(".likes").eq(2).attr("checked",true)
}
}
}
})
}) //在修改
$("#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>PHP
<?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 username 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;
}
}?>js文档结构图 
本文讲解了Bootstrap+jq+jqajax+php+数据库增删改查源码 ，更多相关内容请关注php中文网。
相关推荐：
购物车功能实现 通过 php+MySQL+jQuery+Ajax，实现购物车功能
如何通过linux系统部Linux下Nginx+PHP+Mysql环境搭建流程
Atas ialah kandungan terperinci Bootstrap+jq+jqajax+php+数据库增删改查源码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：YII Framework框架实现国际化的方法Artikel seterusnya：yii2组件实现下拉框带搜索功能
Artikel berkaitan
Lihat lagi- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Cara menggunakan cURL untuk melaksanakan permintaan Dapatkan dan Hantar dalam PHP
- Semua simbol ungkapan dalam ungkapan biasa (ringkasan)