作业：汽车查询--弹窗显示详情，批量删除 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'>全选 <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;
}
作业：汽车查询--弹窗显示详情，批量删除 ajax做法(0521)的更多相关文章
- 作业：汽车查询--弹窗显示详情，批量删除 php做法(0521)
作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- AJAX实现弹窗显示详情，全选和批量删除
以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按 ...
- think php 上下架修改+jq静态批量删除+ajax删除+全选
视图代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- StackExchange.Redis加载Lua脚本进行模糊查询的批量删除和修改
前言 使用StackExchange.Redis没有直接相关的方法进行模糊查询的批量删除和修改操作,虽然可以通过Scan相关的方法进行模糊查询,例如:HashScan("hashkey&qu ...
- 5月21 汽车查询及批量删除----php方法
---恢复内容开始--- 这个与之前不同是在php中实现了页面的查询,引用AJAX实现批量删除及弹窗的显示 作业要求: 页面显示数据代码: <!DOCTYPE html PUBLIC " ...
- ajax“显示弹窗详情”和“删除”功能练习
1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>a ...
- php部分---对数据的多条件查询，批量删除
1.给多条件查询,添加条件 <h1>新闻信息查看</h1> <?php $tiaojian1=" 1=1"; $tiaojian2=" 1= ...
- 11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情
1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- JAVAEE——BOS物流项目04：学习计划、datagrid、分页查询、批量删除、修改功能
1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...
随机推荐
- Swift—do-try-catch错误处理模式-备
Swift 1.x的错误处理模式存在很多弊端,例如:为了在编程时候省事,给error参数传递一个nil,或者方法调用完成后不去判断error是否为nil,不进行错误处理. let contents = ...
- c#使用UIA进行模拟点击操作
之前,我写过一篇c#使用spy进行模拟操作的文章,有朋友在留言中提到了UIA进行操作,今天也使用UIA重新实现一次对vnc窗体的控制测试. 实现目标 在server框内填入192.168.2.200 ...
- Large sum
聪明的办法是想:求前10位,那只要前8位加起来,进2位就OK. 本的办法,就是真的加起来,截前面10位.如我. numList = str.split() sum = 0 for i in range ...
- 给你讲个笑话，我是创业公司CEO
文/办公室奇葩说(Office 78)一个在办公室较为正经的八卦号. 前几天你看见朋友圈刷屏的文章<给你讲个笑话:我是做互联网的>. 你心想,写文章的那人是傻逼吗?觉得做互联网就是个笑 ...
- Linux系统编程（34）—— socket编程之TCP服务器与客户端的交互
前面几篇中实现的client每次运行只能从命令行读取一个字符串发给服务器,再从服务器收回来,现在我们把它改成交互式的,不断从终端接受用户输入并和server交互. /* client.c */ #in ...
- HDU_2553——n皇后问题,作弊
在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.你的任务是,对于给定的N,求出有多少种合法的放置方法. Inp ...
- java与数据结构(3)---java实现循环链表
循环链表:将单链表中尾结点的指针由空指针改为指向头结点,就使整个单链表形成一个环,这种首尾相接的单链表称为单链表循环表,即循环链表. 循环链表与单链表最重要的区别是:尾结点的指针,不再是p->n ...
- [北京周六见]10 家创业公司联合招 Partner-均融资 1 到 3 轮-薪酬股权可观-本周六举行欢迎来坐坐吃喝谈天 - V2EX
[北京周六见]10 家创业公司联合招 Partner-均融资 1 到 3 轮-薪酬股权可观-本周六举行欢迎来坐坐吃喝谈天 - V2EX [北京周六见]10 家创业公司联合招 Partner-均融资 1 ...
- 寻访上海西服定制店_Enjoy·雅趣频道_财新网
寻访上海西服定制店_Enjoy·雅趣频道_财新网 寻访上海西服定制店
- JavaScript 原型与原型链
__proto__ 用来获取和设置对象原型,但它是非标准的.__proto__前后的双下划线,说明它本质上是一个内部属性,而不是一个正式的对外的API,只是由于浏览器广泛支持,才被加入了ES6.标准明 ...