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

最新推荐文章于 2019-09-21 12:19:36 发布
最新推荐文章于 2019-09-21 12:19:36 发布
阅读量2.7k 收藏 10
点赞数 5
分类专栏： php 学习笔记 JavaScript 文章标签： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37212162/article/details/79035713
版权
学习笔记 同时被 3 个专栏收录
17 篇文章 1 订阅
订阅专栏
JavaScript
12 篇文章 0 订阅
订阅专栏
php
4 篇文章 0 订阅
订阅专栏

前台

<!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>
<div class="container">
    <div 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>
    </div>
</div>
<!-- 添加 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div 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>
            </div>
            <div 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="打篮球">打篮球
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改 -->
<div class="modal fade" id="upmyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div 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>
            </div>
            <div 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="打篮球">打篮球
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="update">保存</button>
            </div>
        </div>
    </div>

<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文档结构图
js的文档结构
js的文档结构

IT、木易
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 26
    评论
专栏目录
PHP实现数据库的增删改查(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
05-19 54
PHP实现数据库的增删改查(附完整源码)
bootstrap + ajax +php 实现 前后端的交互之查询表数据和插入数据
OrdnAry的博客
09-05 697
查询数据的php页面 <?php header('content-type:text/html;charset="utf-8"'); /* 连接数据库 天龙八部 */ /* //1.连接数据库 第一个参数：连接数据库IP 第二个参数：用户名 第三个参数：密码*/ $link = mysql_connect("localhost","root","root");
bootstrap、ajax、json、spring mvc、spring、hibernate 项目实战源码
07-20
bootstrap、ajax、json、spring mvc、spring、hibernate 项目实战源码；有任何不懂的技术问题都可以联系我共同讨论
PHP+Ajax+bootstrap+dataTables无刷新分页表格插件
11-11
PHP+Ajax+bootstrap+dataTables无刷新分页表格插件
基于bootstrap+php+mysql的分页实现
weixin_34265814的博客
09-29 544
为什么80%的码农都做不了架构师？>>> ...
新闻管理系统完整的后台带数据库
12-11
新闻管理系统完整的后台带数据库,角色权限很完善，让开发人员直接继承的后台项目
PHP新闻发布系统
05-31
对新闻系统进行需求分析和总体设计，设计数据库，编制程序完成新闻发布、新闻管理等系统模块的开发。
ssm.zip_ssm+bootstrap_ssm增删改查
09-21
ssm的简单的增删改查结合前端框架，非常适合新手学习和操作。
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查 适用于学习ssm框架 jQuery 和 Bootstrap的案例
Springboot+MyBatis+MyBatisPlus+MySQL+Bootstrap增删改查登录分页源码+数据库
最新发布
09-18
Springboot+MyBatis+MyBatisPlus+MySQL+Bootstrap增删改查登录分页源码+数据库
python3 django+mysql+bootstrap增删改查
08-07
参考文档https://blog.csdn.net/lanquankk/article/details/98750454，以前是免费的不知到什么时候被改成收费了，希望大家谅解
使用AJAX的增删改查
11-23
使用简单的AJAX语句编写的增删改查，十分简单。用于简单的查询。
Ajax实现增删改查的demo
04-01
Ajax实现增删改查的demo
ajax效果的增加、修改、删除、查看。无条件查询
10-16
自己写的，比较基础，本资源本人自测，运行成功。包含ajax效果的增加、修改、删除、查看功能。如要借鉴，请修改配置文件数据连接，数据库数据表酌情修改。
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
10-21
主要介绍了BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面 的相关资料,需要的朋友可以参考下
PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（下）——实现分页效果
HJay_Chou的博客
09-21 2275
jQuery实现分页效果思路动态创建页码切换功能分页效果的核心实现效果 思路 通过总数据的条数/每一页显示的条数，并向上取整，就可以得到页码数，并动态添加到ul中。 动态创建页码 //每一页显示的信息数 this.num=2; //当前页面的索引 this.index=0; //找到容器ul this.oul=document.queryS...
【BootStrap】--具有增删改查功能的表格Demo
热门推荐
慢慢的长大
09-14 5万+
bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。
ThinkPHP bootstrap Mysql 信息增删改查分页源码
智轩软件的专栏
12-24 1300
ThinkPHP bootstrap Mysql 信息增删改查分页源码 代码简洁全手工编写，是ThinkPHP框架的入门开发的比较好的脚手架案例，是初中级程序员或者大学生的比较好的学习案例，可以在此基础上二次开发，在Apache服务器向下运行，程序执行效率高，代码简洁。。 视频教程即将在CSDN学院上发布，本课程是由智轩软件开发工作室出品，目前已经出品了JAVA Maven Spring
bootstrap+jq+jsp表格行内编辑不弹窗
05-05
Bootstrap和jQuery都提供了许多方便的表格编辑插件，其中一些包括弹出窗口进行编辑。但是，如果您想要实现行内编辑并且不需要弹出窗口，则可以考虑使用以下方法： 1. 使用HTML5的contenteditable属性：将表格单元格...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 26
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT、木易

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值