6.15ajax寫數據庫的增刪改查

阿新 • • 發佈：2018-06-16

foo pac warning ttr TE dismiss cursor 獲得 meta

<!--<!DOCTYPE html>-->
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="public/bootstrap/css/bootstrap.min.css">
    <script src="public/jquery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="public/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
    <style type="text/css">
        .add{
            width 
: 100px;
            height: 30px;
            background-color: #117A8B;
            border-radius: 3px;
            text-align: center;
            line-height: 30px;
            color: white;
        }
        .add:hover{
            cursor: pointer;
        }
        .plsc{
            width: 100px;
            height 
: 30px;
            background-color: #117A8B;
            border-radius: 3px;
            text-align: center;
            line-height: 30px;
            color: white;
        }
        .plsc:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="add" data-toggle="modal"  data-target="#myModal">添加 </div>
    <form class 
="form-inline">
        <label for="name">姓名：</label>
        <input type="text" class="form-control" id="name" placeholder="請輸入查詢的姓名" >
        <label for="banji">班級：</label>
        <input type="text" class="form-control" id="banji" placeholder="請輸入查詢的班級">
        <div class="add" onclick="selectData()">查詢</div>                
    </form>    
    
    <table class="table" border="1" cellspacing="0" cellpadding="0">
        
    </table>
    <span onclick=‘pldelete()‘ class="plsc">批量刪除</span>
    
    <!--======================添加模態框================-->
    <!-- 模態框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模態框頭部 -->
      <div class="modal-header">
        <h4 class="modal-title">添加頁面</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模態框主體 -->
      <div class="modal-body">
      <form>
          <div class="form-group">
              <label for="xuh">序號：</label>
              <input type="text" class="form-control" id="xuh">
          </div>
          <div class="form-group">
              <label for="xh">學號：</label>
              <input type="text" class="form-control" id="xh">
          </div>
          <div class="form-group">
              <label for="xm">姓名：</label>
              <input type="text" class="form-control" id="xm">
          </div>
          <div class="form-group">
              <label for="xb">性別：</label>
              <input type="text" class="form-control" id="xb">
          </div>
          <div class="form-group">
              <label for="sr">出生日期：</label>
              <input type="text" class="form-control" id="sr">
          </div>
          <div class="form-group">
              <label for="bj">班級：</label>
              <input type="text" class="form-control" id="bj">
          </div>
          
      </form>
      </div>
 
      <!-- 模態框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="add()">添加</button>
      </div>
 
    </div>
  </div>
 </div>
<!--======================修改模態框================-->
    <!-- 模態框 -->
<div class="modal fade" id="xiugaiModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模態框頭部 -->
      <div class="modal-header">
        <h4 class="modal-title">修改頁面</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模態框主體 -->
      <div class="modal-body">
      <form>
          <div class="form-group">
              <label for="xuh">序號：</label>
              <input type="text" class="form-control" id="xuh1">
          </div>
          <div class="form-group">
              <label for="xh">學號：</label>
              <input type="text" class="form-control" id="xh1">
          </div>
          <div class="form-group">
              <label for="xm">姓名：</label>
              <input type="text" class="form-control" id="xm1">
          </div>
          <div class="form-group">
              <label for="xb">性別：</label>
              <input type="text" class="form-control" id="xb1">
          </div>
          <div class="form-group">
              <label for="sr">出生日期：</label>
              <input type="text" class="form-control" id="sr1">
          </div>
          <div class="form-group">
              <label for="bj">班級：</label>
              <input type="text" class="form-control" id="bj1">
          </div>
          
      </form>
      </div>
 
      <!-- 模態框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="modify()">修改</button>
      </div>
 
    </div>
  </div>
 </div>
</body>
</html>
<script type="text/javascript">
    var tab = document.getElementsByTagName("table")[0];
    var colorattr = ["table-primary","table-success","table-danger","table-info","table-warning","table-active","table-secondary"];
    loadData(‘‘,‘‘);
    
    function selectData(){
        var name = document.getElementById("name").value;
        var banji = document.getElementById("banji").value;
        loadData(name,banji);
    }
    
    function loadData(a,b){
            $.ajax({
            type:"post",
            url:"chuli.php",
            async:true,
            data:{
                "type":"chaxun",
                "name":a,
                "banji":b
            },
            dataType:"json",//可以返回數組
            success:function(data){
                var str="";
                str +="<tr><td>全選<input type=‘checkbox‘ onclick=‘qx(this)‘/></td><td>序號</td><td>學號</td><td>姓名</td><td>性別</td><td>出生日期</td><td>班級</td><td>操作</td></tr>";
                for(var i= 0;i<data.length;i++){
                    str +="<tr class = "+colorattr[i]+">";
                    str +="<td><input class=‘ckinput‘ type=‘checkbox‘ value=‘"+data[i][0]+"‘ /></td>";
                                                               //+的作用跟PHP裏的{}一樣，不拼上+識別不了
                    for(var j = 0;j<data[i].length;j++){
                        str +="<td>"+data[i][j]+"</td>";
                    }
                    str +="<td><button type=‘button‘ class=‘btn btn-primary‘ data-toggle=‘modal‘ data-target=‘#xiugaiModal‘ onclick =‘add_modify(\""+data[i]+"\")‘>修改</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type=‘button‘ class=‘btn btn-info‘ onclick =‘deleteData(\""+data[i][0]+"\")‘>刪除</button></td>";
                    str+="</tr>";                                                                                                            //括號裏傳的是數組的每一項的值屬於字符串；        
                }
                tab.innerHTML = str;
            }
            
         });
    }
    function add(){
        var xuh = document.getElementById("xuh").value;
        var xh = document.getElementById("xh").value;
        var xm = document.getElementById("xm").value;
        var xb = document.getElementById("xb").value;
        var sr = document.getElementById("sr").value;
        var bj = document.getElementById("bj").value;
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:true,
            data:{
                "type":"tianjia",
                "xuh":xuh,
                "xh":xh,
                "xm":xm,
                "xb":xb,
                "sr":sr,
                "bj":bj
    
            },
            dataType:"text",
            success:function(data){
                if(data.trim() == "ok"){//php返回的data帶有空格需要加trim()去掉兩頭的空格
                    alert("添加成功!");
                    loadData(‘‘,‘‘);//重新加載頁面
                }
            }
        });
    }
    function add_modify(at){
        var attr = at.split(",");
         //[ "6", "109", "王芳", "女", "1975-02-10 00:00:00", "95031" ]
         //"2:3:4:5".split(":")    //將返回["2", "3", "4", "5"]
         //"|a|b|c".split("|")    //將返回["", "a", "b", "c"] 
        var attr_id = ["xuh1","xh1","xm1","xb1","sr1","bj1"];
        for(var i=0;i<attr.length;i++){
            document.getElementById(attr_id[i]).value = attr[i];
        }
    }
    function modify(){
        var xuh1 = document.getElementById("xuh1").value;
        var xh1 = document.getElementById("xh1").value;
        var xm1 = document.getElementById("xm1").value;
        var xb1 = document.getElementById("xb1").value;
        var sr1 = document.getElementById("sr1").value;
        var bj1 = document.getElementById("bj1").value;
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:true,
            data:{
                "type":"xiugai",
                "xuh1":xuh1,
                "xh1":xh1,
                "xm1":xm1,
                "xb1":xb1,
                "sr1":sr1,
                "bj1":bj1
            },
            dataType:"text",
            success:function(data){
                if(data.trim() == "ok"){
                    alert("修改成功!");
                    loadData(‘‘,‘‘);
                }
            }
        });
    }
    function deleteData(id){
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:true,
            data:{
                "type":"shanchu",
                "id":id
            },
            dataType:"text",
            success:function(data){
                if(data.trim() == "ok"){
                    alert("刪除成功!");
                    loadData(‘‘,‘‘);
                }
            }
        });
    }
    function qx(t){
        var ckinput = document.getElementsByClassName("ckinput");
        for(var i=0;i<ckinput.length;i++){
            if(t.checked){
                ckinput[i].checked = true;    
            }else{
                ckinput[i].checked = false;
            }
        }
    }
    function pldelete(){
        
        var ckinput = document.getElementsByClassName("ckinput");
        var str = "";
        var bs = 0;
        for(var i=0;i<ckinput.length;i++){
            if(ckinput[i].checked){
                bs++;//判斷復選框有沒有選中;
                str +=ckinput[i].value+"‘,‘";
            }
        }
        
        if(bs==0){
            alert("至少選擇一項");
        }else{
             // 輸出12‘,‘34‘,‘需要去掉後三位
        str = str.substr(0,str.length-3);
        
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:true,
            data:{
                "type":"plshanchu",
                "str":str
            },
            dataType:"text",
            success:function(data){
                if(data.trim() == "ok"){
                    alert("批量刪除成功!");
                    loadData(‘‘,‘‘);
                }
            }
        });
        }
        
    }
</script>

主頁

<?php
//Get是用來從服務器上獲得數據，而Post是用來向服務器上傳遞數據。
header("Content-type: text/html; charset=utf-8");
$type = $_POST[‘type‘];
$conn = new mysqli("localhost","root","","ceshi");
$conn->connect_error?die("鏈接失敗"):"";

switch($type){
case "chaxun":
$name = $_POST[‘name‘];
$banji = $_POST[‘banji‘];
$sql = "select * from student where sname like ‘%{$name}%‘ and class like ‘%{$banji}%‘";
$result = $conn->query($sql);
$attr = $result->fetch_all();
echo json_encode($attr);
break;
case "tianjia":
$xuh = $_POST[‘xuh‘];
$xh = $_POST[‘xh‘];
$xm = $_POST[‘xm‘];
$xb = $_POST[‘xb‘];
$sr = $_POST[‘sr‘];
$bj = $_POST[‘bj‘];
$sql = "insert into student values(‘{$xuh}‘,‘{$xh}‘,‘{$xm}‘,‘{$xb}‘,‘{$sr}‘,‘{$bj}‘)";
if($result=$conn->query($sql)){
echo "ok";
}
break;
case "xiugai":
$xuh1 = $_POST[‘xuh1‘];
$xh1 = $_POST[‘xh1‘];
$xm1 = $_POST[‘xm1‘];
$xb1 = $_POST[‘xb1‘];
$sr1 = $_POST[‘sr1‘];
$bj1 = $_POST[‘bj1‘];
$sql = "update student set sno=‘{$xh1}‘,sname = ‘{$xm1}‘,ssex = ‘{$xb1}‘,sbirthday = ‘{$sr1}‘,class = ‘{$bj1}‘ where id =‘{$xuh1}‘";
if($result=$conn->query($sql)){
echo "ok";
}
break;
case "shanchu":
$id= $_POST[‘id‘];
$sql = "delete from student where id = ‘{$id}‘";
if($result=$conn->query($sql)){
echo "ok";
}
break;
case "plshanchu":
$str = $_POST[‘str‘];
$sql = "delete from student where id in (‘{$str}‘)";
if($result=$conn->query($sql)){
echo "ok";
}
break;

}

php頁

技術分享圖片

6.15ajax寫數據庫的增刪改查

foo pac warning ttr TE dismiss cursor 獲得 meta  <html lang="zh"> <head> <meta charse

6.15ajax寫數據庫的增刪改查

6.15ajax寫數據庫的增刪改查

6.3 數據庫增刪改查

abap 的數據庫增刪改查

T-SQL 數據庫-增刪改查

mysql數據庫增刪改查

關於MySQL數據庫——增刪改查語句集錦

php連接數據庫增刪改查----多條件查詢

數據庫增刪改查

SQLite數據庫增刪改查

jdbc之實現數據庫增刪改查的最基本操作

python操作redis--------------數據庫增刪改查

ASP.NET C# 連接 Oracle數據庫增刪改查，事務

Django之ORM數據庫增刪改查

pymysql連接數據庫,實現數據庫增刪改查

數據庫增刪改查（另外解決Mysql在linux下不能插入中文的問題）

MySQL數據庫(增刪改查語句)

練習 python之數據庫增刪改查

django操作數據庫增刪改查

數據庫增刪改復習

基於ef core 2.0的數據庫增刪改審計系統

6.15ajax寫數據庫的增刪改查

相關推薦