欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

Bootstrap+jq+jqajax+php+数据库增删改查源码

程序员文章站 2022-03-14 16:09:32
...

前台

<!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">&times;</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">&times;</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+数据库增删改查源码
Bootstrap+jq+jqajax+php+数据库增删改查源码

本文讲解了Bootstrap+jq+jqajax+php+数据库增删改查源码 ,更多相关内容请关注。

相关推荐:

购物车功能实现 通过 php+MySQL+jQuery+Ajax,实现购物车功能

如何通过linux系统部Linux下Nginx+PHP+Mysql环境搭建流程

讲解署php+mysql+apache 相关操作

以上就是Bootstrap+jq+jqajax+php+数据库增删改查源码的详细内容,更多请关注其它相关文章!

相关标签: php