5月21 练习AJAX的查看详细及批量删除

Posted 2020-07-09 Durriya

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了5月21 练习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>Nation表查询删除处理在一起</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="tanchuang.js"></script>
<link href="tanchuang.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.xq:hover
{
    background-color:#C9C;
    cursor:pointer;}
</style>

</head>

<body>
<table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0"></table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
    //显示数据
    XianShi();
    
    function XianShi()
    {
        $.ajax({
            
            url:"chuliEASY.php",
            data:{type:0},
            dataType:"TEXT",
            type:"POST",
            async:false,//设置同步的
            success: function(data){
                //alert(data);
                var hang = data.split("|");
                
                var str = "<tr><td>代号</td><td>民族</td><td>操作</td></tr>";
                
                for(var i=0;i<hang.length;i++)
                {
                    var lie = hang[i].split("^");    
                    
                    str += "<tr><td><input type=\'checkbox\' value=\'"+lie[0]+"\' class=\'xz\' />"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class=\'xq\' bs=\'"+lie[0]+"\'>查看详情</span></td></tr>";
                }
                
                str += "<tr><td><input type=\'checkbox\' id=\'all\' />全选&nbsp;&nbsp;<input type=\'button\' value=\'批量删除\' id=\'shan\' /></td></tr>";
                $("#xianshi").html(str);
                
                }
            });
            
            
            //全选的按钮
            $("#all").click(function(){
                
                //全选按钮的选中状态
                var qx = $(this)[0].checked;
                //操作所有的复选框
                var ck = $(".xz");
                ck.prop("checked",qx);
                })
            
            
            //查看详情,弹窗定义用class
            $(".xq").click(function(){
                //取点击的主键值
                var code = $(this).attr("bs");
                
                $.ajax({
                    
                    url:"chuliEASY.php",
                    data:{code:code,type:1},
                    dataType:"TEXT",
                    type:"POST",
                    success: function(data){
                        //alert(data);
                        var lie = data.split("^");
                        
                        var html = "<div>民族代号:"+lie[0]+"</div><div>民族名称:"+lie[1]+"</div>";
                        
                        var wd = new Window({
                            
                            width : 400, //宽度
                            height : 500, //高度
                            title : \'详细信息\', //标题
                            content : html, //内容
                            isMask : true, //是否遮罩
                            buttons :"", //按钮
                            isDrag:true,
                            });
                        
                        }
                    
                    });
                })
                
                
                //批量删除
                $("#shan").click(function(){
                    //获取选中的主键值
                    var xz = $(".xz");
                    var str = "";
                    for(var i=0;i<xz.length;i++)
                    {
                        if(xz.eq(i).prop("checked"))
                        {
                            str+=xz.eq(i).val()+"|";
                            
                        }    
                    }
                    str = str.substr(0,str.length-1);
                    
                    $.ajax({
                        
                        url:"chuliEASY.php",
                        data:{str:str,type:2},
                        dataType:"TEXT",
                        type:"POST",
                        success: function(data){
                            
                            alert(data);
                            XianShi();
                            }
                        
                        });
                    })
    }

});

</script>

View Code

处理页面代码部分：简单的方法多个处理页面合在一起

采用switch case要比if...else...更直观

<?php

include("../DBDA.php");
$db = new DBDA();

$type = $_POST["type"];

switch($type)
{
    case 0:
        $sql = "select * from Nation";
        echo $db->StrQuery($sql);    
        break;
    case 1:
        $code = $_POST["code"];
        $sql = "select * from Nation where Code =\'{$code}\'";
        echo $db->StrQuery($sql);
        break;
    case 2:
        $str = $_POST["str"];//接受字符串
        $attr = explode("|",$str);
        $tj = implode($attr,"\',\'");
        
        $sql = "delete from Nation where Code in (\'{$tj}\')";
        //echo $sql;
        if($db->Query($sql,1))
        {
            echo "删除成功";
        }
        else
        {
            echo "删除失败";
        }
    default:
        echo "";

}

View Code

将形如$str = n001|n002|n003|n004的样子转换成$tj = \'n001\',\'n002\',\'n003\'的并用在SQL语句的多条件查询

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

$tj = implode($attr,"\',\'");

$sql = "delete from Nation where Code in (\'{$tj}\')";

另一种方法：

$tj = str_replace("|","\',\'",$str);

$sql = "delete from Nation where Code in (\'{$tj}\')";

自己做的与老师讲的内容会有写出入，在批量删除时没有用到拼接字符串而是使用获取所有被点击的checkbox的value值；另一方面：在查看详情的时候返回JSON而不是TEXT；然后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>
<script src="tanchuang.js"></script>
<link href="tanchuang.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.chakan:hover
{
    cursor:pointer;}

</style>


</head>

<body>


<form action="main.php" method="post">
<div>请输入名称：<input type="text" id="name" name="name"  />&nbsp;&nbsp;
<input type="button" value="查询" id="search" />
</div>
</form>

<br />
<br />
<table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0"></table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {

        $.ajax({
            
            url:"chuli.php",
            async:false,
            dataType:"TEXT",
            type:"POST",
            success: function(data){
                
                //alert(data);
                var str = "<tr><td>代号</td><td>汽车名称</td><td>价格</td><td>油耗</td><td>功率</td><td>操作</td></tr>";
                
                var hang = data.split("|");
                for(var i=0;i<hang.length;i++)
                {
                    var lie = hang[i].split("^");    
                    
                    str += "<tr>";
                    str += "<td><input type=\'checkbox\' value=\'"+lie[0]+"\' class=\'xz\'/>"+lie[0]+"</td>";
                    
                    for(var j=1;j<lie.length;j++)
                    {
                        str += "<td>"+lie[j]+"</td>";
                    }
                    str += "<td class=\'chakan\' bs=\'"+lie[0]+"\'>查看详情</td>";
                    str += "</tr>";
                    
                }
                str += "<tr><td><input type=\'checkbox\' id=\'all\' />全选&nbsp;&nbsp;<input type=\'button\' id=\'bttn\' value=\'批量删除\' /></td></tr>";
                $("#xianshi").html(str);
                }
            
            });
            
    

    //全选按钮
    $("#all").click(function(){
        
        var ck = $(".xz");
        var xz = $(this)[0].checked;//全选按钮的选中状态
        ck.prop("checked",xz);
        
        })

        
    //删除
    $("#bttn").click(function(){
        
        var ck = $(".xz");
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).prop("checked"))
            {
                var code =ck.eq(i).val();
                
                $.ajax({
                    
                    url:"delete.php",
                    data:{code:code},
                    dataType:"TEXT",
                    type:"POST",
                    success: function(data){
                        //alert(data);
                        
                        if(data=="OK")
                        {
                            window.location.href="main.php";    
                        }
                        else
                        {                            
                            alert("删除失败");    
                        }
                        }
                    })    
            }
                
        }        
        })
        
        

    //弹窗
    $(\'.chakan\').click(function(){
        
        var code = $(this).attr("bs");
        
        $.ajax({
            
            url:"chuli2.php",
            dataType:"JSON",
            data:{code:code},
            type:"POST",
            success: function(data){
                //alert(data);
                
                str1 = "";
                for(key in data)
                {
                    str1 += "<span>"+data[key][1]+"</span>&nbsp;&nbsp;";    
                    str1 += "<span>"+data[key][2]+"</span>&nbsp;&nbsp;";
                    str1 += "<span>"+data[key][3]+"</span>&nbsp;&nbsp;";
                    str1 += "<span>"+data[key][4]+"</span>";
                    
                }
                }
            });

            var html = "<div style=\'color:red\'>"+str1+"</div>";
            var button ="<input type=\'button\' value=\'确定\' /><input type=\'button\' value=\'取消\' />";
            var win = new Window({
                
                width : 700, //宽度
                height : 500, //高度
                title : \'弹窗\', //标题
                content : html, //内容
                isMask : false, //是否遮罩
                buttons : button, //按钮
                isDrag:true,
                
                });
        
        })
        
        //搜索页面
        $("#search").click(function(){
            
            var name = $("#name").val();
        $.ajax({
            
            url:"chuli.php",
            async:false,
            data:{name:name},
            dataType:"TEXT",
            type:"POST",
            success: function(data){
                
                //alert(data);
                var str = "<tr><td>代号</td><td>汽车名称</td><td>价格</td><td>油耗</td><td>功率</td><td>操作</td></tr>";
                
                var hang = data.split("|");
                for(var i=0;i<hang.length;i++)
                {
                    var lie = hang[i].split("^");    
                    
                    str += "<tr>";
                    str += "<td><input type=\'checkbox\' value=\'"+lie[0]+"\' class=\'xz\' name=name[]/>"+lie[0]+"</td>";
                    
                    for(var j=1;j<lie.length;j++)
                    {
                        str += "<td>"+lie[j]+"</td>";
                    }
                    str += "<td class=\'chakan\' bs=\'"+lie[0]+"\'>查看详情</td>";
                    str += "</tr>";
                    
                }
                str += "<tr><td><input type=\'checkbox\' id=\'all\' />全选&nbsp;&nbsp;<input type=\'button\' id=\'bttn\' value=\'批量删除\' /></td></tr>";
                $("#xianshi").html(str);
                }
            
            });
                        
            })
});

</script>

View Code

处理页面：chuli.php实现表格内容的展示及搜索查询显示内容

<?php

include("../DBDA.php");
$db = new DBDA();
    $cx="";
    $value="";
    if(!empty($_POST["name"]))
    {
        $name = $_POST["name"];
        $cx = " where Name like \'%{$name}%\'";//查询字符串
        $value = $name;
    }
    
$sql = "select Code,Name,Price,Oil,Powers from car  ".$cx;
//echo $sql;
echo $db->StrQuery($sql);

View Code

查看详情的处理页面：chuli2.php 返回JSON类型

<?php

include("../DBDA.php");
$db = new DBDA();

$code = $_POST["code"];

$sql = "select Code,Name,Price,Oil,Powers from car where Code = \'{$code}\'  ";
$attr = $db->Query($sql);

echo json_encode($attr);

View Code

批量删除的处理页面:delete.php

<?php

$code = $_POST["code"];
include("../DBDA.php");
$db = new DBDA();

$sql = "delete from car where code = \'{$code}\'";

$result = $db->Query($sql,1);//如果成功返回true or false
if($result)
{
    echo "OK";
}
else
{
    echo "NO";
}

View Code

以上是关于5月21 练习AJAX的查看详细及批量删除的主要内容，如果未能解决你的问题，请参考以下文章

5月21日 JavaScrip应用t练习

ajax“显示弹窗详情”和“删除”功能练习

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

SHELL编程练习-批量创建删除用户和组

购物车练习程序（自己写的和老师讲的）自己的健壮性不好

spring Cloud(初级版)笔记(最新最详细)周阳老师2021年6月更新