简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Backend Development  >  Bootstrap+jq+jqajax+php+database addition, deletion, modification, check source code

Bootstrap+jq+jqajax+php+database addition, deletion, modification, check source code

jacklove
jackloveOriginal
2018-06-15 14:52:422066browse

Front Desk

<!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 Document structure diagram
Bootstrap+jq+jqajax+php+database addition, deletion, modification, check source code
Bootstrap+jq+jqajax+php+database addition, deletion, modification, check source code

This article explains Bootstrap jq jqajax php database addition, deletion, modification and query source code. For more related content, please pay attention to the php Chinese website.

Related recommendations:

The shopping cart function is realized through php MySQL jQuery Ajax to realize the shopping cart function

How to build the Nginx PHP Mysql environment process under Linux through the linux system departmentExplanation

Deploy php mysql apache related operations

The above is the detailed content of Bootstrap+jq+jqajax+php+database addition, deletion, modification, check source code. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：YII Framework method to achieve internationalizationNext article：YII Framework method to achieve internationalization

Related articles

See more