首页 > 数据库技术 > 详细

6.15ajax写数据库的增删改查

时间：2018-06-15 23:56:40      阅读：344      评论：0      收藏：0      [点我收藏+] 
<!--<!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写数据库的增删改查
原文：https://www.cnblogs.com/sunhao1987/p/9189355.html

                

                
                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                            

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            
                            

                        

                    

                

                
            

        

        

            

    



            
            


    

        

            分享档案

        

            更多>
        

        

        

    

    

        
                
                    2021年09月23日
                    (328)

            
                
                    2021年09月24日
                    (313)

            
                
                    2021年09月17日
                    (191)

            
                
                    2021年09月15日
                    (369)

            
                
                    2021年09月16日
                    (411)

            
                
                    2021年09月13日
                    (439)

            
                
                    2021年09月11日
                    (398)

            
                
                    2021年09月12日
                    (393)

            
                
                    2021年09月10日
                    (160)

            
                
                    2021年09月08日
                    (222)

            
    




            


    

        
最新文章

        

            更多>

        

        

    

    

        
    




            


    

        
教程昨日排行

        

            更多>

        

        

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            汇智网  
            PHP教程  
            插件网  
					
			
        

    





    

        

            

                关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
            

            

                © 2014 bubuko.com 版权所有
            

            

                打开技术之扣，分享程序人生！