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

作业：显示以下界面：

作业要求：

1.查看详细信息，以弹窗的形式显示，使用ajax
2.批量删除

一、主页面

 <!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>
 <style type="text/css">
 .xq{
     background-color:#0080FF;
     color:#FFF;
     }
 .xq:hover{
     cursor:pointer;
     background-color:#FF8000;
     }
 </style>
 <link href="tanchuang.css" rel="stylesheet" type="text/css" />
 </head>

 <body>

 <h1>汽车查询页面</h1>
 <div>
     请输入查询内容：<input type="text" id="name" />
     <input type="submit" value="查询" id="chaxun" />
 </div>
 <br />
 <table width="100%" border="1" cellpadding="0" cellspacing="0" id="xianshi">

 </table>

 </body>
 <script type="text/javascript">
 $(document).ready(function(e) {

     //显示页面
     ShowAll();

     //显示页面方法
     function ShowAll()
     {
             var name=$("#name").val();
             $.ajax({
                 async:false,
                 url:"chuli.php",
                 //想让所有ajax使用同一个处理页面，给ajax都设置data{type: }和type:"POST"
                 data:{name:name,type:0},
                 type:"POST",
                 dataType:"TEXT",
                 success: function(data)
                 {
                     var str="<tr><td>代号</td><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' class='ck' value='"+lie[0]+"' />"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[5]+"</td><td><span class='xq' bs='"+lie[0]+"'>查看详情</span></td>";
                         str+="</tr>";
                     }

                     str+="<tr><td colspan='7'><input type='checkbox' id='qx'>全选&nbsp;&nbsp;<input type='button' value='批量删除' id='sc'></td></tr>";
                     $("#xianshi").html(str);
                 }

             });    

         //输入查询内容，点击查询后显示的页面
         $("#chaxun").click(ShowAll);    

             //查看详情
     $(".xq").click(function(){

             var code=$(this).attr("bs");
             $.ajax({
                 url:"chuli.php",
                 data:{code:code,type:1},
                 type:"POST",
                 dataType:"TEXT",
                 success: function(data){

                     //根据code查出一条信息
                     var lie=data.split("^");
                     //拼接显示内容
                     var html="<div value='"+lie[0]+"'>名称： "+lie[1]+"</div>";
                     html+="<div value='"+lie[0]+"'>系列："+lie[2]+"</div>";
                     html+="<div value='"+lie[0]+"'>油耗："+lie[4]+"</div>";
                     html+="<div value='"+lie[0]+"'>功率："+lie[5]+"</div>";
                     html+="<div value='"+lie[0]+"'>价格："+lie[7]+"</div>";

                     var win=new Window({
                         width : 300, //宽度
                         height : 300, //高度
                         title : '详细信息', //标题
                         content : html, //内容
                         isMask : false, //是否遮罩
                         buttons : "", //按钮
                         isDrag:true,    

                     });

                 }
             });

     })

     //全选
     $("#qx").click(function(){
         //找到class为ck的元素
         var ck=$(".ck");
         //全选复选框的自身状态
         var qx=$(this)[0].checked;
         ck.prop("checked",qx);

     })

     //批量删除
     $("#sc").click(function(){

         //找到要删除的选项
         var ck=$(".ck");
         for(var i=0;i<ck.length;i++)
         {
             if(ck.eq(i).prop("checked"))
             {
                 var code=ck.eq(i).val();

                 $.ajax({
                 url:"chuli.php",
                 data:{code:code,type:2},
                 type:"POST",
                 dataType:"TEXT",
                 success: function(data){
                     if(data.trim()=="OK")
                     {
                         window.location.href="index.php";
                     }
                     else
                     {
                         alert("删除失败!");
                     }

                 }
                 });

             }
         }

     })

     }

 });

 </script>
 </html>

二、处理页面（所有的ajax处理都包含在一个处理页面）

 <?php

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

 //所有ajax使用一个处理页面
 $type=$_POST["type"];

 switch($type)
 {
     case 0:
         $name=$_POST["name"];
         $sql="select code, name, brand, oil, powers, price from car where name like '%{$name}%'";
         echo $db->StrQuery($sql);
         break;

     case 1:
         $code=$_POST["code"];
         $sql="select * from car where code='{$code}'";
         echo $db->StrQuery($sql);
         break;

     case 2:
         $code=$_POST["code"];
         $sql="delete from car where code='{$code}'";
         $r=$db->StrQuery($sql,1);
         if($r)
         {
             echo "OK";
             }
         else
         {
             echo "NO";
             }
         break;

     default:
         echo "";
         break;
 }