Bootstrap+jq+jqajax+php+데이터베이스 추가, 삭제, 수정, 소스코드 확인
- jacklove원래의
- 2018-06-15 14:52:422085검색
프런트 데스크
<!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를 통한 장바구니 기능 구현
리눅스 시스템 부서를 통해 리눅스에서 Nginx+PHP+Mysql 환경 구축 방법설정 과정 Linux에서 Nginx+PHP+Mysql 환경
위 내용은 Bootstrap+jq+jqajax+php+데이터베이스 추가, 삭제, 수정, 소스코드 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.