作业：显示以下界面：

作业要求：

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

一、主页面

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>无标题文档</title>
  6.  <script  src="../../jquery-1.11.2.min.js"></script>
  7.  <script src="tanchuang.js"></script>
  8.  <style type="text/css">
  9.  .xq{
  10.      background-color:#0080FF;
  11.      color:#FFF;
  12.      }
  13.  .xq:hover{
  14.      cursor:pointer;
  15.      background-color:#FF8000;
  16.      }
  17.  </style>
  18.  <link href="tanchuang.css" rel="stylesheet" type="text/css" />
  19.  </head>
  20.  
  21.  <body>
  22.  
  23.  <h1>汽车查询页面</h1>
  24.  <div>
  25.      请输入查询内容：<input type="text" id="name" />
  26.      <input type="submit" value="查询" id="chaxun" />
  27.  </div>
  28.  <br />
  29.  <table width="100%" border="1" cellpadding="0" cellspacing="0" id="xianshi">
  30.  
  31.  </table>
  32.  
  33.  </body>
  34.  <script type="text/javascript">
  35.  $(document).ready(function(e) {
  36.  
  37.      //显示页面
  38.      ShowAll();
  39.  
  40.      //显示页面方法
  41.      function ShowAll()
  42.      {
  43.              var name=$("#name").val();
  44.              $.ajax({
  45.                  async:false,
  46.                  url:"chuli.php",
  47.                  //想让所有ajax使用同一个处理页面，给ajax都设置data{type: }和type:"POST"
  48.                  data:{name:name,type:0},
  49.                  type:"POST",
  50.                  dataType:"TEXT",
  51.                  success: function(data)
  52.                  {
  53.                      var str="<tr><td>代号</td><td>名称</td><td>系列</td><td>油耗</td><td>功率</td><td>价格</td><td>操作</td></tr>";
  54.  
  55.                      var hang=data.split("|");
  56.                      for(var i=0;i<hang.length;i++)
  57.                      {
  58.                          var lie=hang[i].split("^");    
  59.  
  60.                          str+="<tr>";
  61.                          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>";
  62.                          str+="</tr>";
  63.                      }
  64.  
  65.                      str+="<tr><td colspan='7'><input type='checkbox' id='qx'>全选&nbsp;&nbsp;<input type='button' value='批量删除' id='sc'></td></tr>";
  66.                      $("#xianshi").html(str);
  67.                  }
  68.  
  69.              });    
  70.  
  71.          //输入查询内容，点击查询后显示的页面
  72.          $("#chaxun").click(ShowAll);    
  73.  
  74.              //查看详情
  75.      $(".xq").click(function(){
  76.  
  77.              var code=$(this).attr("bs");
  78.              $.ajax({
  79.                  url:"chuli.php",
  80.                  data:{code:code,type:1},
  81.                  type:"POST",
  82.                  dataType:"TEXT",
  83.                  success: function(data){
  84.  
  85.                      //根据code查出一条信息
  86.                      var lie=data.split("^");
  87.                      //拼接显示内容
  88.                      var html="<div value='"+lie[0]+"'>名称： "+lie[1]+"</div>";
  89.                      html+="<div value='"+lie[0]+"'>系列："+lie[2]+"</div>";
  90.                      html+="<div value='"+lie[0]+"'>油耗："+lie[4]+"</div>";
  91.                      html+="<div value='"+lie[0]+"'>功率："+lie[5]+"</div>";
  92.                      html+="<div value='"+lie[0]+"'>价格："+lie[7]+"</div>";
  93.  
  94.                      var win=new Window({
  95.                          width : 300, //宽度
  96.                          height : 300, //高度
  97.                          title : '详细信息', //标题
  98.                          content : html, //内容
  99.                          isMask : false, //是否遮罩
  100.                          buttons : "", //按钮
  101.                          isDrag:true,    
  102.  
  103.                      });
  104.  
  105.                  }
  106.              });
  107.  
  108.      })
  109.  
  110.      //全选
  111.      $("#qx").click(function(){
  112.          //找到class为ck的元素
  113.          var ck=$(".ck");
  114.          //全选复选框的自身状态
  115.          var qx=$(this)[0].checked;
  116.          ck.prop("checked",qx);
  117.  
  118.      })
  119.  
  120.      //批量删除
  121.      $("#sc").click(function(){
  122.  
  123.          //找到要删除的选项
  124.          var ck=$(".ck");
  125.          for(var i=0;i<ck.length;i++)
  126.          {
  127.              if(ck.eq(i).prop("checked"))
  128.              {
  129.                  var code=ck.eq(i).val();
  130.  
  131.                  $.ajax({
  132.                  url:"chuli.php",
  133.                  data:{code:code,type:2},
  134.                  type:"POST",
  135.                  dataType:"TEXT",
  136.                  success: function(data){
  137.                      if(data.trim()=="OK")
  138.                      {
  139.                          window.location.href="index.php";
  140.                      }
  141.                      else
  142.                      {
  143.                          alert("删除失败!");
  144.                      }
  145.  
  146.                  }
  147.                  });
  148.  
  149.              }
  150.          }
  151.  
  152.      })
  153.  
  154.      }
  155.  
  156.  });
  157.  
  158.  </script>
  159.  </html>

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

  1.  <?php
  2.  
  3.  include ("../../DBDA.class.php");
  4.  $db=new DBDA();
  5.  
  6.  //所有ajax使用一个处理页面
  7.  $type=$_POST["type"];
  8.  
  9.  switch($type)
  10.  {
  11.      case 0:
  12.          $name=$_POST["name"];
  13.          $sql="select code, name, brand, oil, powers, price from car where name like '%{$name}%'";
  14.          echo $db->StrQuery($sql);
  15.          break;
  16.  
  17.      case 1:
  18.          $code=$_POST["code"];
  19.          $sql="select * from car where code='{$code}'";
  20.          echo $db->StrQuery($sql);
  21.          break;
  22.  
  23.      case 2:
  24.          $code=$_POST["code"];
  25.          $sql="delete from car where code='{$code}'";
  26.          $r=$db->StrQuery($sql,1);
  27.          if($r)
  28.          {
  29.              echo "OK";
  30.              }
  31.          else
  32.          {
  33.              echo "NO";
  34.              }
  35.          break;
  36.  
  37.      default:
  38.          echo "";
  39.          break;
  40.  }

作业：汽车查询--弹窗显示详情，批量删除 ajax做法(0521)的更多相关文章

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

    作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

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

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

  3. think php 上下架修改+jq静态批量删除+ajax删除+全选

    视图代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  4. StackExchange.Redis加载Lua脚本进行模糊查询的批量删除和修改

    前言 使用StackExchange.Redis没有直接相关的方法进行模糊查询的批量删除和修改操作,虽然可以通过Scan相关的方法进行模糊查询,例如:HashScan("hashkey&qu ...

  5. 5月21 汽车查询及批量删除----php方法

    ---恢复内容开始--- 这个与之前不同是在php中实现了页面的查询,引用AJAX实现批量删除及弹窗的显示 作业要求: 页面显示数据代码: <!DOCTYPE html PUBLIC " ...

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

    1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>a ...

  7. php部分---对数据的多条件查询，批量删除

    1.给多条件查询,添加条件 <h1>新闻信息查看</h1> <?php $tiaojian1=" 1=1"; $tiaojian2=" 1= ...

  8. 11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  9. JAVAEE——BOS物流项目04：学习计划、datagrid、分页查询、批量删除、修改功能

    1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...

随机推荐

  1. NVIDIA 显卡温度提示过高,显卡温度高99度怎么办？

    你可能没有在意您的NVIDIA(英伟达)显卡温度,那么你就不会知道显卡温度过高如何导致的呢?也不会知道如果去解决显卡温度过高的问题了,在此我希望在电脑玩游戏或者在办公中电脑速度快慢,或者发热的情况下, ...

  2. IOS APP IDs

    感谢分享 说下 APP ID 的组成为  APP ID Prefix + APP ID suffix APP ID Prefix 为10个字符  你不用管它 APP ID Suffix  这个有点讲究 ...

  3. 关于 "Context" 模式（基于COM思想IUnknown思想）

    有同事很喜欢用Context模式,觉得是自己"首创", 我有些自己的想法, 或者大家可以发表下自己的观点.   什么是Context模式? 23种设计模式中没有这个模式, 是同事自 ...

  4. Cookie和Session（转）

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  5. Angular service, 服务

      早上开车上班, 发现车快没油了, 于是拐进加油站. 有一辆出租车也在加油..   Angular service在一个应用里是以单例形式存在的. 这个单例的实例是由service factory( ...

  6. Shell脚本常用命令简介

    格式化日期yyyy-mm-dd hh:mm:ss显示 date "+%Y-%m-%d %H:%M:%S" 将内容写入到新文件 echo "hello">a ...

  7. vb安装过程中 ntvdm.exe[9696]中发生未处理的win32异常

    最近电脑总是出问题导致我的学习效率很低,前几天在用VB6.0的时候有个知识点不太熟悉,于是按F1发现不会出来帮助文档.突然想到重新装系统之后忘记了安装MSDN帮助插件,就在我安装这个软件的时候发现电脑 ...

  8. linux下javaEE系统安装部署

    最近公司在将服务器往阿里云上面迁移,所以需要重新在linux上面安装相关的软件以及部署项目,这里用到的linux版本为centos7.0,需要安装的软件有 jdk1.7.mysql5.6.mongo3 ...

  9. CF 61E 树状数组+离散化 求逆序数加强版 三个数逆序

    http://codeforces.com/problemset/problem/61/E 题意是求 i<j<k && a[i]>a[j]>a[k] 的对数 会 ...

  10. [React] Extracting Private React Components

    we leverage private components to break our render function into more manageable pieces without leak ...