码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2016-05-21 21:51:34      阅读：219      评论：0      收藏：0      [点我收藏+]

标签：

老师讲过之后的复习：

显示数据的代码部分：

技术分享 
<!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的查看详细及批量删除

标签：

原文地址：http://www.cnblogs.com/Duriyya/p/5515503.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！