6.16 ajax写car表

发布时间：2020-12-16 03:04:11 所属栏目：百科来源：网络整理

导读：!--主页--!DOCTYPE htmlhtml 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/

<!--主页-->
<!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>
</head>
<body>
    <button onclick="cha()">查询</button><input type="text" name="" id="cm" value="" />&nbsp;&nbsp;
    <span><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加数据</button></span>    
    <table border="1" cellspacing="0" cellpadding="0" class="table table-striped">
    </table> 
<!--=====================添加模态框 =========================-->
    <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">
                  <div class="form-group">
                  <label for="xh">序号:</label>
                  <input type="text" class="form-control" id="xh">
                </div>
                <div class="form-group">
                  <label for="chem">车名:</label>
                  <input type="text" class="form-control" id="chem">
                </div>
                <div class="form-group">
                  <label for="zh">组号:</label>
                  <input type="text" class="form-control" id="zh">
                </div>
                <div class="form-group">
                    <label for="sj">时间:</label>
                    <input type="text" class="form-control" id="sj">
                </div>
                <div class="form-group">
                      <label for="email">油耗:</label>
                      <input type="text" class="form-control" id="yh">
                    </div>
                <div class="form-group">
                      <label for="dl">动力：</label>
                      <input type="text" class="form-control" id="dl">
                    </div>
                <div class="form-group">
                      <label for="pl">排量：</label>
                      <input type="text" class="form-control" id="pl">
                    </div>
                <div class="form-group">
                      <label for="jg">价格：</label>
                      <input type="text" class="form-control" id="jg">
                    </div>
                <div class="form-group">
                      <label for="pic">pic:</label>
                      <input type="text" class="form-control" id="pic">
                    </div>
              </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="mymodify">
      <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">
                  <div class="form-group">
                  <label for="xh">序号:</label>
                  <input type="text" class="form-control" id="xh1">
                </div>
                <div class="form-group">
                  <label for="chem">车名:</label>
                  <input type="text" class="form-control" id="chem1">
                </div>
                <div class="form-group">
                  <label for="zh">组号:</label>
                  <input type="text" class="form-control" id="zh1">
                </div>
                <div class="form-group">
                    <label for="sj">时间:</label>
                    <input type="text" class="form-control" id="sj1">
                </div>
                <div class="form-group">
                      <label for="email">油耗:</label>
                      <input type="text" class="form-control" id="yh1">
                    </div>
                <div class="form-group">
                      <label for="dl">动力：</label>
                      <input type="text" class="form-control" id="dl1">
                    </div>
                <div class="form-group">
                      <label for="pl">排量：</label>
                      <input type="text" class="form-control" id="pl1">
                    </div>
                <div class="form-group">
                      <label for="jg">价格：</label>
                      <input type="text" class="form-control" id="jg1">
                    </div>
                <div class="form-group">
                      <label for="pic">pic:</label>
                      <input type="text" class="form-control" id="pic1">
                    </div>
              </div>
          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal"onclick="xiugai()">提交</button>
          </div>
     
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="plshanchu()">批量删除</button>
</body>
</html>
<script type="text/javascript">
    var colorattr = ["table-primary","table-success","table-danger","table-info","table-warning","table-active","table-secondary","table-primary","table-info"];
    var tab = document.getElementsByTagName("table")[0];
    loadData(‘‘);
    
    function cha(){
         var cm = document.getElementById("cm").value;
         loadData(cm);
         
    }
    function loadData(cm){
        $.ajax({
             type:"post",
             url:"carcl.php",
             async:true,
             data:{
                 "type":"chazhao","cm" : cm
             },
             dataType:"json",//返回数据类型
             success: function(data){
                     var str ="";
                    str +="<tr><td><input type=‘checkbox‘ onclick=‘quan(this)‘>全选</td><td>序号</td><td>车名</td><td>组号</td><td>时间</td><td>油耗</td><td>动力</td><td>排量</td><td>价格</td><td>pic</td><td>修改</td><td>删除</td></tr>";
                    for(var i=0 ;i<data.length; i++){
                        str +="<tr class="+colorattr[i]+">";
                        str +="<td><input type=‘checkbox‘ class=‘quanin‘ value=‘"+data[i][0]+"‘ /></td>"
                        for(var j=0;j<data[i].length;j++){
                                str +="<td>"+data[i][j]+"</td>"; 
                        }
                        str +="<td><button class=‘btn btn-primary‘ data-toggle=‘modal‘ data-target=‘#mymodify‘ onclick =‘add_modify(""+data[i]+"")‘>修改</button></td>";
                        str +="<td><button onclick=‘shanchu(""+data[i][0]+"")‘>删除</button></td>";
                        str +="</tr>";
                    }
                    tab.innerHTML = str;
             }
         });
    }
    function add() {
        var xh = document.getElementById("xh").value;
        var chem = document.getElementById("chem").value;
        var zh = document.getElementById("zh").value;
        var sj = document.getElementById("sj").value;
        var yh = document.getElementById("yh").value;
        var dl = document.getElementById("dl").value;
        var pl = document.getElementById("pl").value;
        var jg = document.getElementById("jg").value;
        var pic = document.getElementById("pic").value;
        $.ajax({
            type:"post",
            url:"carcl.php",
            async:true,
            data:{
                "type":"tianjia","xh" :xh,"chem":chem,"zh":zh,"sj":sj,"yh":yh,"dl":dl,"pl":pl,"jg":jg,"pic":pic
            },
            dataType:"text",//返回数据类型
            success:function(data){
                if(data.trim() == "ok"){
                    alert("添加成功");
                    loadData(‘‘);
                }
                
            }
        });
    }  
    function add_modify(at) {
        var attr = at.split(",");
        var moren = ["xh1","chem1","zh1","sj1","yh1","dl1","pl1","jg1","pic1"];
        for (var i=0;i<attr.length;i++) {
            document.getElementById(moren[i]).value = attr[i];
        }
        
    }
    function xiugai() {
        var xh1 = document.getElementById("xh1").value;
        var chem1 = document.getElementById("chem1").value;
        var zh1 = document.getElementById("zh1").value;
        var sj1 = document.getElementById("sj1").value;
        var yh1 = document.getElementById("yh1").value;
        var dl1 = document.getElementById("dl1").value;
        var pl1 = document.getElementById("pl1").value;
        var jg1 = document.getElementById("jg1").value;
        var pic1 = document.getElementById("pic1").value;
        $.ajax({
            type:"post",
            data:{
                "type":"xiugai","xh1" :xh1,"chem1":chem1,"zh1":zh1,"sj1":sj1,"yh1":yh1,"dl1":dl1,"pl1":pl1,"jg1":jg1,"pic1":pic1
            },
            success:function(data){
                if(data.trim() == "ok"){
                    alert("修改成功!");
                    loadData(‘‘);
                }
            }
        });
    }
    function shanchu(hao){
        $.ajax({
            type:"post",
            data:{
                "type":"shanchu","hao": hao
            },
            success:function(data){
                if(data.trim() == "ok"){
                    alert("删除成功!");
                    loadData(‘‘);
                }
            }
        });
    }
    function quan(t){
        var quanin = document.getElementsByClassName("quanin");
        for(var i=0;i<quanin.length;i++){
            if(t.checked){
                quanin[i].checked=true;
            }else{
                quanin[i].checked=false;
            }
        }
    }
    
    function plshanchu(){
      var quanin = document.getElementsByClassName("quanin");
      var str ="";
      var bs = 0;
      for (var i=0;i<quanin.length;i++) {
          if(quanin[i].checked){
              bs++;
              str +=quanin[i].value+"‘,‘";
              }      
      }
        if(bs==0){
            alert("请至少选择一项")
        }else{
           str=str.substr(0,str.length-3);
           
           $.ajax({
            type:"post",
            data:{
                "type":"plshanchu","str":str
            },
            success:function (data) {
                if(data.trim() == "ok"){
                    alert("批量删除成功!");
                    loadData(‘‘);
                }
            }
        });        
            
        }
    
    }
</script>

<?php
   $type = $_POST[‘type‘];
   $conn = new mysqli("localhost","root","","ceshi");
   $conn->connect_error?die("链接失败"):"";
   switch($type){
   case "chazhao":
          $cm = $_POST[‘cm‘];
          $sql = "select * from car where name like ‘%{$cm}%‘";
             $result = $conn->query($sql);
             $attr = $result->fetch_all();
             echo json_encode($attr);
    break;
    case "tianjia":
         $xh = $_POST[‘xh‘];
         $chem = $_POST[‘chem‘];
         $zh = $_POST[‘zh‘];
         $sj = $_POST[‘sj‘];
         $yh = $_POST[‘yh‘];
         $dl = $_POST[‘dl‘];
         $pl = $_POST[‘pl‘];
         $jg = $_POST[‘jg‘];
         $pic = $_POST[‘pic‘];
         $sql = "insert into car values(‘{$xh}‘,‘{$chem}‘,‘{$zh}‘,‘{$sj}‘,‘{$yh}‘,‘{$dl}‘,‘{$pl}‘,‘{$jg}‘,‘{$pic}‘)";
         if($result = $conn->query($sql)){
             echo "ok";
         }
         break;
    case "xiugai":
         $xh1 = $_POST[‘xh1‘];
         $chem1 = $_POST[‘chem1‘];
         $zh1 = $_POST[‘zh1‘];
         $sj1 = $_POST[‘sj1‘];
         $yh1 = $_POST[‘yh1‘];
         $dl1 = $_POST[‘dl1‘];
         $pl1 = $_POST[‘pl1‘];
         $jg1 = $_POST[‘jg1‘];
         $pic1 = $_POST[‘pic1‘];
         $sql = "update car set Name=‘{$chem1}‘,Brand=‘{$zh1}‘,Time=‘{$sj1}‘,Oil=‘{$yh1}‘,Powers=‘{$dl1}‘,Exhaust=‘{$pl1}‘,Price=‘{$jg1}‘,Pic=‘{$pic1}‘ where Code=‘{$xh1}‘";
         if($result = $conn->query($sql)){
             echo "ok";
         }
         break;
     case "shanchu":
         $hao = $_POST[‘hao‘];
         $sql = "delete from car where code=‘{$hao}‘";
          if($result = $conn->query($sql)){
             echo "ok";
             
         }
         break;
    case "plshanchu":
         $str = $_POST[‘str‘];
         $sql = "delete from car where code in (‘{$str}‘)";
          if($result = $conn->query($sql)){
             echo "ok";       
         }
          break;      
    }
    
?>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!