Maison >développement back-end >tutoriel php >Bootstrap+jq+jqajax+php+ajout, suppression, modification de base de données, vérification du code source
Bootstrap+jq+jqajax+php+ajout, suppression, modification de base de données, vérification du code source
- jackloveoriginal
- 2018-06-15 14:52:422108parcourir
Réception
<!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;
}
}?>Diagramme de structure du document js
Cet article explique les ajouts, suppressions, modifications et le code source de la base de données Bootstrap+jq+jqajax+php+. Pour plus de contenu connexe, veuillez suivre le site Web chinois de php.
Recommandations associées :
Comment construire l'environnement Nginx+PHP+Mysql sous Linux via le Département Système LinuxExplication sur le processus de mise en place de l'environnement Nginx+PHP+Mysql sous Linux
déployer une opération liée à php+mysql+apache
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode YII Framework pour parvenir à l'internationalisationArticle suivant：Méthode YII Framework pour parvenir à l'internationalisation
Articles Liés
Voir plus- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Tous les symboles d'expression dans les expressions régulières (résumé)