Bootstrap+jq+jqajax+php+데이터베이스 추가, 삭제, 수정, 소스코드 확인

jacklove
풀어 주다: 2023-04-01 10:50:01
원래의
2080명이 탐색했습니다.

프런트 데스크

<!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=&#39;checkbox&#39; title=&#39;"+data[i].id+"&#39; class=&#39;che&#39;></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=&#39;del&#39; title=&#39;"+data[i].id+"&#39;>删除</button>" +                    "<button id=&#39;upd&#39; title=&#39;"+data[i].id+"&#39; data-toggle=&#39;modal&#39; data-target=&#39;#upmyModal&#39;>修改</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(&#39;click&#39;,&#39;#upd&#39;,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=&#39;checkbox&#39; title=&#39;"+data[i].id+"&#39; class=&#39;che&#39;></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=&#39;del&#39; title=&#39;"+data[i].id+"&#39;>删除</button>" +                            "<button id=&#39;upd&#39; title=&#39;"+data[i].id+"&#39; data-toggle=&#39;modal&#39; data-target=&#39;#upmyModal&#39;>修改</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=&#39;checkbox&#39; title=&#39;"+data[i].id+"&#39; class=&#39;che&#39;></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=&#39;del&#39; title=&#39;"+data[i].id+"&#39;>删除</button>" +                            "<button id=&#39;upd&#39; title=&#39;"+data[i].id+"&#39; data-toggle=&#39;modal&#39; data-target=&#39;#upmyModal&#39;>修改</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[&#39;action&#39;]==&#39;get&#39;){        $sql="select * from student";        $con=$sqls->query($sql);        echo $con;
    }
    //添加   else if($_REQUEST[&#39;action&#39;]==&#39;add&#39;){        $username=$_REQUEST[&#39;username&#39;];        $pwd=$_REQUEST[&#39;pwd&#39;];        $sex=$_REQUEST[&#39;sex&#39;];        $love=$_REQUEST[&#39;like&#39;];        $sql="insert into student (username,pwd,sex,love)VALUES (&#39;$username&#39;,&#39;$pwd&#39;,&#39;$sex&#39;,&#39;$love&#39;)";        $con=$sqls->update($sql);        echo $con;
   }
   //删除  else if($_REQUEST[&#39;action&#39;]==&#39;del&#39;){        $id=$_REQUEST[&#39;id&#39;];        $sql="delete from student where id=$id";        $con=$sqls->update($sql);        echo $con;
  }
  //批量删除    else if($_REQUEST[&#39;action&#39;]==&#39;del&#39;){        $id=$_REQUEST[&#39;id&#39;];        $sql="delete from student where id in(&#39;$id&#39;)";        $con=$sqls->update($sql);        echo $con;
    }
    //修改
    //先cha查找    else if($_REQUEST[&#39;action&#39;]==&#39;upd&#39;){        $id=$_REQUEST[&#39;id&#39;];    $sql="select * from student where id=&#39;$id&#39;";    $con=$sqls->query($sql);    echo $con;
}    else if($_REQUEST[&#39;action&#39;]==&#39;update&#39;){        $id=$_REQUEST[&#39;id&#39;];    $username=$_REQUEST[&#39;username&#39;];    $pwd=$_REQUEST[&#39;pwd&#39;];    $sex=$_REQUEST[&#39;sex&#39;];    $love=$_REQUEST[&#39;like&#39;];    $sql="update student set username=&#39;$username&#39;,pwd=&#39;$pwd&#39;,sex=&#39;$sex&#39;,love=&#39;$love&#39; WHERE id=$id";    $con=$sqls->update($sql);    echo $con;
}
    //查找    if($_REQUEST[&#39;action&#39;]==&#39;query&#39;){        $username=$_REQUEST[&#39;username&#39;];        $sql="select * from student WHERE username LIKE &#39;%$username%&#39;";        $con=$sqls->query($sql);        echo $con;
    }
    //按条件查找    if($_REQUEST[&#39;action&#39;]==&#39;limits&#39;){    $username=$_REQUEST[&#39;username&#39;];    $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=&#39;localhost&#39;,$user=&#39;root&#39;,$pwd=&#39;root&#39;,$database=&#39;test&#39;){
            $this->conn=mysqli_connect($host,$user,$pwd,$database);            if($this->conn){                $this->conn->set_charset(&#39;utf8&#39;);
            }
        }        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[&#39;flag&#39;]=true;                $arr[&#39;msg&#39;]=&#39;操作成功&#39;;
            }else{                $arr[&#39;flag&#39;]=false;                $arr[&#39;msg&#39;]=&#39;操作失败&#39;;
            }            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 중국어 웹사이트를 참고하세요.

관련 추천 :

php+MySQL+jQuery+Ajax를 통한 장바구니 기능 구현

리눅스 시스템 부서를 통해 리눅스에서 Nginx+PHP+Mysql 환경 구축 방법설정 과정 Linux에서 Nginx+PHP+Mysql 환경

설명 php+mysql+apache 관련 작업 배포

위 내용은 Bootstrap+jq+jqajax+php+데이터베이스 추가, 삭제, 수정, 소스코드 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
php
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿