ajax弹窗+删除

Posted 2020-07-10 MrY的nn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax弹窗+删除相关的知识，希望对你有一定的参考价值。

删除自己倒腾了半天没有实现，昨儿上午又约了医生所以老师讲的没有听到……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>//加载jquery包，这个一定要放在第一个
<script src="tanchuang.js"></script>//加载弹窗的js
<link href="tanchuang.css" rel="stylesheet" type="text/css" />//加载弹窗的css
<style type="text/css">//美化“查看详情”，加了背景色
.tan
{ background-color:#A8FFA8;
  color:#666;
}
.tan:hover//背景色在鼠标覆盖时改变鼠标变成小手
{ background-color:#69F;
  color:#666;
  cursor:pointer;}

</style>
</head>

<body>

<table id="table" width="100%" cellpadding="0" cellspacing="0" border="1">//建表以及表头，这里没用ajax，用的php来显示数据
<tr>
<td>代号</td>
<td>汽车名称</td>
<td>价格</td>
<td>油耗</td>
<td>功率</td>
<td>操作</td>
</tr>



<?php//php显示Car表中数据
include("ChaXun.class.php");
$db=new ChaXun();
$sql="select * from Car";
$attr=$db->Query($sql);
foreach($attr as $v)
{
    echo"<tr>
        <td><div><input type=‘checkbox‘ class=‘dx‘ value=‘$v[0]‘/>$v[0] </div></td>//给了复选框class和value，方便在jquery用
        <td>$v[1]</td>
        <td>$v[7]</td>
        <td>$v[4]</td>
        <td>$v[5]</td>
        <td><sapn class=‘tan‘ bs=‘$v[0]‘>查看详情</span></td> //自定义属性bs  
       </tr>";
}
?>
<tr>
<td colspan="6"><input type="checkbox" id="qx"/>全选&nbsp;&nbsp;<input type="button" value="批量删除" id="shanchu" /></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#qx").click(function(){//全选
        var ck=$(".dx");//根据类名找到所有的复选框
        var qx = $("#qx")[0].checked;//将全选的jqery对象转化为DOM对象的选中状态
        ck.prop("checked",qx);//jquery中复选框可以用prop
    })
        
        
    
        $("#shanchu").click(function(){//删除
            var dx=$(".dx");
            var str="";
             for(var i=0;i<dx.length;i++)
            { if(dx.eq(i).prop("checked"))
              {
                  str+=dx.eq(i).val()+"|";              
                  
              }    
              str=str.substr(0,str.length-1);
            
              $.ajax({
                async:false,
                url:"chuli.php",
                data:{str:str},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                    
                    alert(data.trim());
                    
                }
                });            
              
            }    
            
        
            })            
$(".tan").click(function(){//弹窗
    var code=$(this).attr("bs");//获取主键值
    $.ajax({
        async:false,
        url:"tanchuang.php",
        data:{code:code},
        type:"POST",
        dataType:"TEXT",
        success: function(data){
            var str="";
            var lie=data.trim().split("^");
            var html = "<div>代号:"+lie[0]+"</div> <div>汽车名称:"+lie[1]+"</div> <div>价格:"+lie[2]+"</div> <div>油耗:"+lie[3]+"</div> <div>功率:"+lie[4]+"</div>";
    
    var win = new Window({                
                width : 500, 
                height :300, 
                title : ‘信息详情‘, 
                content :html, 
                isMask : true,
                buttons :"", 
                isDrag:true,
    
                });
            }
      });
})
        
    
    
    



});
</script>
</html>

tanchaung.php

<?php
$code=$_POST["code"];
include("ChaXun.class.php");
$db=new ChaXun();
$sql="select * from Car where Code=‘{$code}‘";
$str=$db->StrQuery($sql);
echo $str;

chuli.php

<?php
include("ChaXun.class.php");
$db = new ChaXun(); 

$str = $_POST["str"];

$attr = explode("|",$str);

$tj = implode($attr,"‘,‘");


$sql = "delete from Car where Code in (‘{$tj}‘)";

if($db->Query($sql,1))
{
    echo "删除成功！";
}
else
{
    echo "删除失败！";
}

以上是关于ajax弹窗+删除的主要内容，如果未能解决你的问题，请参考以下文章

AJAX实现弹窗显示详情，全选和批量删除

作业：汽车查询--弹窗显示详情，批量删除 ajax做法(0521)

Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器

AJAX相关JS代码片段和部分浏览器模型

Bootstrap-modal Ajax弹窗传值缓存怎么清除

作业：汽车查询--弹窗显示详情，批量删除 php做法