Home >Backend Development >PHP Tutorial >Bootstrap+jq+jqajax+php+database addition, deletion, modification, check source code
Bootstrap+jq+jqajax+php+database addition, deletion, modification, check source code
- jackloveOriginal
- 2018-06-15 14:52:422109browse
Front Desk
<!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 Document structure diagram
This article explains Bootstrap jq jqajax php database addition, deletion, modification and query source code. For more related content, please pay attention to the php Chinese website.
Related recommendations:
How to build the Nginx PHP Mysql environment process under Linux through the linux system departmentExplanation
Deploy php mysql apache related operationsThe above is the detailed content of Bootstrap+jq+jqajax+php+database addition, deletion, modification, check source code. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：YII Framework method to achieve internationalizationNext article：YII Framework method to achieve internationalization