老师讲过之后的复习:

显示数据的代码部分:

<!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. ThreadLocal使用

    ThreadLocal提供了一种访问某个变量的特殊方式:访问到的变量属于当前线程,即保证每个线程的变量不一样,而同一个线程在任何地方拿到的变量都是一致的,这就是所谓的线程隔离. 如果要使用Thread ...

  2. 论文笔记:Parallel Tracking and Verifying: A Framework for Real-Time and High Accuracy Visual Tracking

    Parallel Tracking and Verifying: A Framework for Real-Time and High Accuracy Visual Tracking  本文目标在于 ...

  3. (转载)C#控件缩写规范

    标准控件缩写规范 类 型 前 缀 示 例 Adrotator adrt adrtTopAd BulletedList blst blstCity Button btn btnSubmit Calend ...

  4. Unity3D学习笔记(三十一):Xlua(1)

    Xlua:腾讯研发,开源免费   配置:文件解压,拷贝到Unity项目里 注意:Xlua文件夹不许移动,不许重命名   运行Xlua: 1.引用命名空间 2.创建虚拟机 3.运行lua语句 4.不需要 ...

  5. lvs笔记

    LVS是Linux Virtual Server的简写,意为Linux虚拟服务器,是虚拟的服务器集群系统,可在UNIX/LINUX平台下实现负载均衡集群功能.该项目在1998年5月由章文嵩博士组织成立 ...

  6. dRMT: Disaggregated Programmable Switching, SIGCOMM17

    Reference: dRMT, SIGCOMM 2017 今年的SIGCOMM17会议上,Cisco System和MIT的团队针对RMT模型现有的问题,合作发表了这篇"dRMT: Dis ...

  7. 如何在 sublime text 中以当前文件目录打开 cmd

    需求描述 sublime 固定可以自己设置和添加新的编译环境,比如在我们写 js 的时候可能会添加 node 来对 js 文件进行运行.但是,这样做的结果是,我们只能看到运行结果.有时候还希望能做些其 ...

  8. http协议的状态码解释

    一些常见的状态码为: 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务器超时 下面提供 HTTP 状态码的完整列表.点击链接可了解详情.您也可以访问 HTTP 状态码上的 ...

  9. 点击返回上一页 wx.navigateTo不管用了

    做跳转的时候,发现想返回上一页,但是这个上一页又是tab上的页面,返回不了怎么办呢 wx.navigateTo({ url: '../search/search', })   解决方法: wx.reL ...

  10. 添加删除tag

    为某个分支打tag git tag -a v1. 9fceb02 删除tag git tag -d test_tag git push origin --delete tag test_tag 推送: ...