Bootstrap+jq+jqajax+php+数据库增删改查源码(简化版)

其他 2018-05-16 22:10:54 阅读次数: 2

今天为大家带来的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>
    .left{
        float: left;
    }
    .right{
        float: right;
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="header">
            <div class="col-lg-6 left">
                <input type="text" id="seach"><button id="sea" class="btn bg-info">搜索</button>
            </div>
            <div class="col-lg-6 right text-right">
                <button  class="btn bg-info" data-toggle="modal" data-target="#addmyModal">添加</button>
                <button id="delAll" class="btn bg-info">批量删除</button>
            </div>
        </div>

        <table class="table table-bordered">
            <thead>
            <tr>
                <th>选择</th>
                <th>id</th>
                <th>用户名</th>
                <th>密码</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
                <th>注册时间</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tab"></tbody>
        </table>
    </div>
</div>
<!--添加-->
<div class="modal fade" id="addmyModal" 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" id="username" class="form-control">
                <label>密码：</label><input type="password" id="pwd" class="form-control">
                <label>年龄：</label><input type="number" id="age" class="form-control">
                <label>性别：</label><br>
                <input type="radio" name="sex" class="sex"  value="男">男
                <input type="radio" name="sex" class="sex"  value="女">女<br>
                <label>电话：</label><input type="tel" id="tel" class="form-control">
                <label>时间：</label><input type="text" id="datatime" class="form-control">
                <label>爱好：</label><br>
                <input type="checkbox" class="like" value="睡觉" >睡觉
                <input type="checkbox" class="like" value="玩游戏" >玩游戏
                <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="updmyModal" 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" id="user" class="form-control">
                <label>密码：</label><input type="password" id="pwds" class="form-control">
                <label>年龄：</label><input type="number" id="ages" class="form-control">
                <label>性别：</label><br>
                <input type="radio" name="sex" class="sexs"  value="男">男
                <input type="radio" name="sex" class="sexs"  value="女">女<br>
                <label>电话：</label><input type="tel" id="tels" class="form-control">
                <label>时间：</label><input type="text" id="datatimes" class="form-control">
                <label>爱好：</label><br>
                <input type="checkbox" class="love" value="睡觉" >睡觉
                <input type="checkbox" class="love" value="玩游戏" >玩游戏
                <input type="checkbox" class="love" value="看电视" >看电视
                <input type="checkbox" class="love" value="跑步" >跑步
                <input type="checkbox" class="love" 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>
</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>

js脚本 

<script>
//渲染页面
    $.ajax({
        url:"bc.php",
        type:"get",
        data:{
            action:"get"
        },
        dataType:"json",
        success:function (data) {
            $("#tab").append(change(data))
        }

    })
//增加
$("#add").click(function () {
    // console.log(getVal($(".like")))
    // console.log(arr,$("#username").val(),$("#pwd").val(),$("#age").val(),$(".sex:checked").val(),$("#tel").val(),$("#datatime").val())
    $.ajax({
        url:"bc.php",
        type:"get",
        data:{
            action:"add",
            username:$("#username").val(),
            pwd:$("#pwd").val(),
            age:$("#age").val(),
            sex:$(".sex:checked").val(),
            tel:$("#tel").val(),
            datatime:$("#datatime").val(),
            love: getVal($(".like"))
        },
        dataType:"json",
        success:function (data) {
           if(data.flag==true){
               alert("添加成功")
               $('#addmyModal').modal('hide')
               window.location.reload()
           }else {
               alert("失败")
               $('#addmyModal').modal('hide')
               window.location.reload()
           }
        }

    })
})
//删除
//单删
$(document).on("click",'#del',function () {

    console.log( $(this).attr('title'))
    $.ajax({
        url:"bc.php",
        type:"get",
        data:{
            action:"del",
            id: $(this).attr('title'),
        },
        dataType:"json",
        success:function (data) {
            if(data.flag==true){
                alert("删除成功")
                window.location.reload()
            }
        }

    })
})
//批量删除
$("#delAll").click(function () {
    console.log(getVal($(".che")))
    $.ajax({
        url:"bc.php",
        type:"get",
        data:{
            action:"delall",
            id:getVal($(".che")),
        },
        dataType:"json",
        success:function (data) {
            if(data.flag==true){
                alert("删除成功")
                window.location.reload()
            }else {
                alert("删除失败")
                window.location.reload()
            }
        }

    })
})
//查找
$('#sea').click(function () {
    console.log($("#seach").val())
    $.ajax({
        url:"bc.php",
        type:"get",
        data:{
            action:"search",
            txt:$("#seach").val()

        },
        dataType:"json",
        success:function (data) {
            console.log(data)
                $("#tab").html(change(data));
                // window.location.reload()
        }

    })
})
//修改
//1.先查找
var id=0;
$(document).on('click','#upd',function () {
    id=$(this).attr('title')
    // console.log(id);


    $.ajax({
        url:"bc.php",
        data:{
            action:"upd",
            id:id
        },
        dataType:"json",
        success:function (data) {
             $("#user").val(data[0].username)
              $("#pwds").val(data[0].pwd)
                 if(data[0].sex=="男"){
                 $(".sexs").eq(0).attr("checked",true)
                 }else  if(data[0].sex=="女"){
                 $(".sexs").eq(1).attr("checked",true)
                 }
             $("#ages").val(data[0].age)
             $("#tels").val(data[0].tel)
             $("#datatimes").val(data[0].dates)
             $($(".likes")).val(setChecked(data[0].love))
        }
    })
})
//2.在修改
$("#update").click(function () {
    console.log(getVal($(".love")))
    // console.log($("#user").val(),$("#pwds").val(),$("#ages").val(),$(".sexs:checked").val(),$("#tels").val(),$("#datatimes").val())
    $.ajax({
        url:"bc.php",
        type:"get",
        data:{
            action:"update",
            id:id,
            username:$("#user").val(),
            pwd:$("#pwds").val(),
            age:$("#ages").val(),
            sex:$(".sexs:checked").val(),
            tel:$("#tels").val(),
            datatime:$("#datatimes").val(),
            love: getVal($(".love"))
        },
        dataType:"json",
        success:function (data) {
            $('#updModal').modal('hide')
                window.location.reload()

        }

    })
})
    function change(data) {
        var html=""
        $(data).each(function (i,v) {
            html+=" <tr>\n" +
                "<td><input type=\"checkbox\" class=\"che\" value="+data[i].id+"></td>" +
                "<td>"+data[i].id+"</td>\n" +
                "<td>"+data[i].username+"</td>\n" +
                "<td>"+data[i].pwd+"</td>\n" +
                "<td>"+data[i].age+"</td>\n" +
                "<td>"+data[i].sex+"</td>\n" +
                "<td>"+data[i].tel+"</td>\n" +
                "<td>"+data[i].dates+"</td>\n" +
                "<td>"+data[i].love+"</td>\n" +
                "<td>\n" +
                "<button id=\"del\"  title="+data[i].id+">删除</button>\n" +
                "<button id=\"upd\" title="+data[i].id+" data-toggle='modal' data-target='#updmyModal'>修改</button>\n" +
                "</td>\n" +
                "</tr>"
        })
        return html
    }
    //获取多选框的值
    function getVal(str) {
        var arr=[]
        for (var i=0;i<str.length;i++){
            if(str[i].checked){
                arr.push(str[i].value)
            }
        }
        return arr.join(",")
        console.log(arr)
    }
    //多选框默认选中
    function setChecked(str) {
        var arr=str.split(",");
        for (var i=0;i<arr.length;i++){
            if(arr[i]=="睡觉"){
                $(".love").eq(0).attr("checked",true)
            }else  if(arr[i]=="玩游戏"){
                $(".love").eq(1).attr("checked",true)
            } else if(arr[i]=="看电视"){
                $(".love").eq(2).attr("checked",true)
            }else  if(arr[i]=="跑步"){
                $(".love").eq(3).attr("checked",true)
            }else   if(arr[i]=="看书"){
                $(".love").eq(4).attr("checked",true)
            }
        }
    }
</script>

后台

<?php
/**
 * Created by PhpStorm.
 * User: ASUS
 * Date: 2018/1/12
 * Time: 16:58
 */
require ("lib/DB.php");
$mysql=new mysqldb();
//渲染页面
if($_REQUEST['action']=="get"){
    $spl="select * from admin";
    $con=$mysql->query($spl);
    echo $con;
}
//添加
elseif ($_REQUEST['action']=="add"){
    $username=$_REQUEST['username'];
    $pwd=$_REQUEST['pwd'];
    $age=$_REQUEST['age'];
    $sex=$_REQUEST['sex'];
    $tel=$_REQUEST['tel'];
    $datatime=$_REQUEST['datatime'];
    $love=$_REQUEST['love'];
    if($username==""){
        echo"<script>alert('不能为空')</script>";
    }else{
        $spl="insert into admin (username,pwd,age,sex,tel,dates,love)VALUES ('$username','$pwd','$age','$sex','$tel','$datatime','$love')";
    }
    $con=$mysql->update($spl);
    echo $con;
}
//删除
elseif ($_REQUEST['action']=='del'){
    $id=$_REQUEST['id'];
    $spl="delete from admin where id=$id";
    $con=$mysql->update($spl);
    echo $con;
}
//批量删除
elseif ($_REQUEST['action']=='delall'){
    $id=$_REQUEST['id'];
    $spl="delete from admin where id in($id)";
    $con=$mysql->update($spl);
    echo $con;
}
//查找
elseif ($_REQUEST['action']=='search'){
    $seach=$_REQUEST['txt'];
    $spl="select * from admin WHERE concat(id,username,pwd,age,sex,tel,dates,love) LIKE '%$seach%'";
    $con=$mysql->query($spl);
    echo $con;
}
//修改
elseif ($_REQUEST['action']=='upd'){
    $id=$_REQUEST['id'];
    $spl="select * from admin WHERE   id=$id";
    $con=$mysql->query($spl);
    echo $con;
}
elseif ($_REQUEST['action']=='update'){
    $id=$_REQUEST['id'];
    $username=$_REQUEST['username'];
    $pwd=$_REQUEST['pwd'];
    $age=$_REQUEST['age'];
    $sex=$_REQUEST['sex'];
    $tel=$_REQUEST['tel'];
    $datatime=$_REQUEST['datatime'];
    $love=$_REQUEST['love'];
    $spl="update admin set username='$username',pwd='$pwd',age='$age',sex='$sex',tel='$tel',dates='$datatime' WHERE  id=$id";
    $con=$mysql->query($spl);
    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/79082236
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022