Bootstrap+jq+jqajax+php+数据库增删改查源码(跳转页面版)

其他 2018-05-16 22:10:39 阅读次数: 3

今天为大家带来的Bootstrap+jq+jqajax+php+数据库增删改查源码(跳转页面)。

添加页面

<!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>Bootstrap 101 Template</title>

    <link href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    .mt{
        margin-top: 10px;
    }
</style>
<body>
<div class="container ">
    <h3 class="text-center">用户添加</h3>
    <!--用户名-->
    <div class="row mt">
        <div class="col-lg-2 text-right">用户名</div>
        <div class="col-lg-10"><input type="text" class="form-control" id="username"></div>
    </div>
    <!--密码-->
    <div class="row mt">
        <div class="col-lg-2 text-right">密码</div>
        <div class="col-lg-10"><input type="password" class="form-control" id="pwd"></div>
    </div>
    <!--性别-->
    <div class="row mt">
        <div class="col-lg-2 text-right">性别</div>
        <div class="col-lg-10">
            <input type="radio" class=" sex" name="sex" value="男" >男
            <input type="radio" class=" sex" name="sex" value="女" >女
        </div>
    </div>
    <!--爱好-->
    <div class="row mt">
        <div class="col-lg-2 text-right">爱好</div>
        <div class="col-lg-10">
            <input type="checkbox"   class="like" value="玩游戏">玩游戏
            <input type="checkbox"   class="like" value="跑步">跑步
            <input type="checkbox"   class="like" value="打篮球">打篮球
        </div>
    </div>
    <div class="row mt ">
        <div class="col-lg-12 text-right">
            <button class="btn" id="add">添加</button>
            <input type="reset" value="重置" class="btn">
        </div>
    </div>
</div>
<script src="lib/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script src="lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
<script>
    //获取复选框的值
    $("#add").click(function () {
        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:checked").val(),arr.join(","))
        $.get({
            url:"index.php",
            data:{
                action:"add",
                username:$("#username").val(),
                pwd:$("#pwd").val(),
                sex:$(".sex:checked").val(),
                like:arr.join(",")
            },
            dataType:"json",
            success:function (data) {
                window.location.href="show.html"
            }
        })
    })

</script>

展示页面

<!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 href="add.html" class="btn" id="add">添加</button>
        <button class="btn" id="delAll" >批量删除</button>
    </div>
</div>
<script src="lib/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script src="lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
<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 () {
        window.location.href="add.html"
    })
    // 删
    //单删
    $(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)
            }
        }
        c
        $.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 () {
        window.location.href="update.html?="+$(this).attr("title")
    })
    //在修改
    $("#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>

修改页面

<!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>Bootstrap 101 Template</title>

    <link href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container ">
    <h3 class="text-center">用户编辑</h3>
    <!--用户名-->
    <div class="row mt">
        <div class="col-lg-2 text-right">用户名</div>
        <div class="col-lg-10">
               <input type="text" class="form-control" id="username">
        </div>
    </div>
    <!--密码-->
    <div class="row mt">
        <div class="col-lg-2 text-right">密码</div>
        <div class="col-lg-10"><input type="password" class="form-control" id="pwd"></div>
    </div>
    <!--性别-->
    <div class="row mt">
        <div class="col-lg-2 text-right">性别</div>
        <div class="col-lg-10">
            <input type="radio" class=" sex" name="sex" value="男" >男
            <input type="radio" class=" sex" name="sex" value="女" >女
        </div>
    </div>
    <!--爱好-->
    <div class="row mt">
        <div class="col-lg-2 text-right">爱好</div>
        <div class="col-lg-10">
            <input type="checkbox"   class="like" value="玩游戏">玩游戏
            <input type="checkbox"   class="like" value="跑步">跑步
            <input type="checkbox"   class="like" value="打篮球">打篮球
        </div>
    </div>
    <div class="row mt ">
        <div class="col-lg-12 text-right">
            <button class="btn" id="add">保存</button>
            <input type="reset" value="重置" class="btn">
        </div>
    </div>
</div>
<script src="lib/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script src="lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
<script>
  var arr=window.location.search.split("=").pop();
    $.ajax({
        url:"index.php",
        data:{
            action:"upd",
            id:arr
        },
        dataType:"json",
        success:function (data) {
            console.log(data)
            $("#ids").val(data[0].id);
            $("#username").val(data[0].username);
            $("#pwd").val(data[0].pwd)
            // console.log(data[0].sex)
            if(data[0].sex=="男"){
                $(".sex").eq(0).attr("checked",true)
            }else {
                $(".sex").eq(1).attr("checked",true)
            }
            // console.log(.join(","))
            //因为data[0].love是字符串所以要转换成数然后进行判断
            var str=data[0].love
            var arr=str.split(",")
            for (var i=0;i<arr.length;i++){
                // console.log(arr[i])
                if(arr[i]=="玩游戏"){
                    $(".like").eq(0).attr("checked",true)
                }else if(arr[i]=="跑步"){
                    $(".like").eq(1).attr("checked",true)
                }else if(arr[i]=="打篮球"){
                    $(".like").eq(2).attr("checked",true)
                }
            }
        }
    })
    $("#add").click(function () {
        // alert(1)
        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:"update",
                id:$("#ids").val(),
                username:$("#username").val(),
                pwd:$("#pwd").val(),
                sex:$(".sex:checked").val(),
                like:arr.join(",")
            },
            dataType:"json",
            success:function (data) {
                window.location.href="show.html"
                // console.log(data)
            }
        })
    })
</script>

后台

<?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 concat(username,pwd,sex,love) 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;
        }
    }
?>

猜你喜欢

转载自blog.csdn.net/qq_37212162/article/details/79083822
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022