简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Backend-Entwicklung  >  Bootstrap+jq+jqajax+php+Datenbank hinzufügen, löschen, ändern, Quellcode überprüfen

Bootstrap+jq+jqajax+php+Datenbank hinzufügen, löschen, ändern, Quellcode überprüfen

jacklove
jackloveOriginal
2018-06-15 14:52:422001Durchsuche

Rezeption

<!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-Dokumentstrukturdiagramm
Bootstrap+jq+jqajax+php+Datenbank hinzufügen, löschen, ändern, Quellcode überprüfen
Bootstrap+jq+jqajax+php+Datenbank hinzufügen, löschen, ändern, Quellcode überprüfen

In diesem Artikel wird das Hinzufügen, Löschen, Ändern und Quellcode der Bootstrap+jq+jqajax+php+-Datenbank erläutert zur chinesischen PHP-Website.

Verwandte Empfehlungen:

Die Warenkorbfunktion wird über PHP+MySQL+jQuery+Ajax implementiert, um die Warenkorbfunktion zu realisieren

So erstellen Sie die Nginx+PHP+Mysql-Umgebung unter Linux durch die Linux-SystemabteilungErläuterung zum Prozess der Einrichtung der Nginx+PHP+Mysql-Umgebung unter Linux

PHP+MySQL+Apache-bezogene Operation bereitstellen

Das obige ist der detaillierte Inhalt vonBootstrap+jq+jqajax+php+Datenbank hinzufügen, löschen, ändern, Quellcode überprüfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：YII-Framework-Methode zur Erreichung der InternationalisierungNächster Artikel：YII-Framework-Methode zur Erreichung der Internationalisierung

In Verbindung stehende Artikel

Mehr sehen