老师讲过之后的复习：

显示数据的代码部分：

<!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>

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

采用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 "";

}

将形如$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>

处理页面：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);

查看详情的处理页面：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);

批量删除的处理页面: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";

}

5月21 练习AJAX的查看详细及批量删除的更多相关文章

  1. MVC3学习：利用mvc3+ajax实现全选和批量删除

    本例数据库操作使用EF code first; 先利用mvc自带的模板,先生成一个list视图,然后再手动添加复选框和删除按钮 <table> <tr> @*在标题行添加一个全 ...

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

    以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按 ...

  3. ajax查看详细返回信息

    查看详细成功返回信息: success : function(data, textStatus, jqXHR) { console.log(data); console.log(textStatus) ...

  4. 成都Uber优步司机奖励政策（2月21日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. 成都Uber优步司机奖励政策（4月21日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  6. 关于2013年1月21日的DNS故障分析文章

    首页 资讯 小组 资源 注册 登录       首页 最新文章 业界 开发 IT技术 设计 创业 IT职场 访谈 在国外 经典回顾 更多 > - 导航条 - 首页 最新文章 业界 - Googl ...

  7. 优步UBER司机全国各地奖励政策汇总 (3月21日-3月27日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  8. 北京Uber优步司机奖励政策（9月21日~9月27日）

    用户组:优步北京人民优步A组(适用于9月21日-9月27日) 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不 ...

  9. 成都Uber优步司机奖励政策（3月21日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

随机推荐

  1. c# 之系统环境安装

    在重装系统后,对一些原有软件进行了卸载,不知道是什么原因总是提示vs2015 需安装IE10,但是又碰到ie10的一些插件不适合此系统.网上介绍的vs修复没有任何作用 最后找到方法是:重装系统,然后不 ...

  2. 题解——POJ 2234 Matches Game

    这道题也是一个博弈论 根据一个性质 对于\( Nim \)游戏,即双方可以任取石子的游戏,\( SG(x) = x \) 所以直接读入后异或起来输出就好了 代码 #include <cstdio ...

  3. 题解——P1108低价购买（DP）

    第一问是最长下降子序列,n很小,n^2可过,注意最长下降子序列的枚举顺序即可 ;i<=n;i++)//不要写错 ;j<i;j++)//不要打成<= ) b[i]=b[j]+; 第二问 ...

  4. 【Python】【面向对象】

    """# [[面向对象]]#[访问限制]#如果要让内部属性不被外部访问,可加双下划线,编程私有变量.只有内部可以访问,外部不能访问.class Student(objec ...

  5. 完美解决百度网盘、浏览器下载限速问题proxyee-down(附带win破解版云盘)

    win版破解云盘 下载: <PanDownload> 使用文档: <PanDownload使用> Mac方法 限速.限速! 平时下载东西限速倒无所谓,遇到急一点的.盯着80km ...

  6. linux du

    命令参数: -a或-all  显示目录中个别文件的大小. -b或-bytes  显示目录或文件大小时,以byte为单位. -c或--total  除了显示个别目录或文件的大小外,同时也显示所有目录或文 ...

  7. ext4.2常用的几种弹框

    以下记录了自己在做项目时,经常用到的几种ext弹框.项目中使用的ext是4.2版本的. 1. Ext.Msg.alert() 使用此种方式时,如果提示信息过长则提示信息会被覆盖掉一部分. Ext.Ms ...

  8. java开发手册（阿里巴巴）——编程规约（部分）

    (一)命名风格 3. [强制]类名使用 UpperCamelCase 风格,但以下情形例外:DO / BO / DTO / VO / AO / PO / UID 等. 正例:MarcoPolo / U ...

  9. indexOf includes 区别

    indexOf     返回数值类型   ( 索引.-1 ) includes    返回布尔类型    ( true  .false  ),且能区分出 NaN  undefined ( 如新建空数组 ...

  10. 学习笔记26— roc曲线（python）

    一.概念: 准确率(Accuracy), 精确率(Precision), 召回率(Recall)和F1-Measure 机器学习(ML), 自然语言处理(NLP), 信息检索(IR)等领域, 评估(E ...