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

Posted 坏小子之涛声依旧

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax“显示弹窗详情”和“删除”功能练习相关的知识，希望对你有一定的参考价值。

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

2.批量删除

 

“查询”功能可以参考前面的文章，这里只讲解ajax“显示弹窗详情”和“删除”功能

第一:在body中的代码

<title>ajax汽车网页查询</title>
<script src="jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="tanchuang.js"></script>
<link href="tanchuang.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.xq
{
	width:90px;
	height:20px;
	color:#000;
	text-align:center;
	line-height:20px;
	vertical-align:middle;
}
.xq:hover
{
	cursor:pointer;
	background-color:#0FF;
	color:#F00;
}
</style>
</head>

<body>
<h1>汽车查询网页</h1>
<br />
<form action="index.php" method="post">
请输入名称：<input type="text" name="text" value=""/>
    
<input type="submit" value="查询"/>
</form>
<br />
<table width="100%" border="1" cellpadding="0" cellspacing="0" id="xianshi">

</table>
</body>

　　

第二：因为使用ajax，所以代码大部分是在JScript，现实页面函数xianshi()

$(document).ready(function(e) {

xianshi();


//页面显示
function xianshi()
{
	$.ajax({
		
		async:false,
		url:"chuli.php",
		data:{type:0},
		type:"POST",
		dataType:"TEXT",
		success: function(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\' class=\'m\' value=\'"+lie[0]+"\'/>"+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\'/>全选<input type=\'button\' id=\'del\' value=\'批量删除\'/></td></tr>";
			
			$("#xianshi").html(str);
			}
		
		
		});

　　

第三：查看详情添加弹窗

//给查看详情添加弹窗
	$(".xq").click(function(){
		
		var code=$(this).attr("bs");
		
		$.ajax({
			
			async:false,
			url:"chuli.php",
			data:{code:code,type:1},
			type:"POST",
			dataType:"TEXT",
			success: function(data)
			{
				var lie=data.split("^");
				
				var html="<div>名称："+lie[1]+"</div><div>生产时间："+lie[3]+"</div><div>油耗："+lie[4]+"</div><div>动力："+lie[5]+"</div><div>排放量："+lie[6]+"</div><div>价格："+lie[7]+"</div>";
				var Wd=new Window({
					
					width:600,
					height:400,
					title:\'汽车详情\',
					content:html,
					isMask:true,
					buttons:"",
					isDrag:true,
					
					});
				
			},
			});
		
		});

　　

第四：全选功能

//全选
		$("#all").click(function(){
			
			var jd=$(this)[0].checked;
			var jc=$(".m");
			jc.prop("checked",jd);
			
			});

　　

第五：批量删除功能

//批量删除
		$("#del").click(function(){
			
			var jc=$(".m");
			var str="";
			for(var i=0;i<jc.length;i++)
			{
				if(jc.eq(i).prop("checked"))
				{
					str+=jc.eq(i).val()+"|";
				}
			}

			str = str.substr(0,str.length-1);
			
			$.ajax({
				
				async:false,
				url:"chuli.php",
				data:{str:str,type:2},
				type:"POST",
				dataType:"TEXT",
				success: function(data)
				{
					alert(data);
					xianshi();
				},
				});
			});

　　

第六：ajax中调用的chuli.php页面

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

$type=$_POST["type"];

switch($type)
{
	case 0:
		$sql = "select * from car";
		echo $db->StrQuery($sql);
		break;
	case 1:
		$code = $_POST["code"];
		$sql = "select * from car where Code = \'{$code}\'";
		echo $db->StrQuery($sql);
		
		break;
	case 2:
		$str = $_POST["str"];
		$attr = explode("|",$str);
		$tj = implode($attr,"\',\'");
		$sql = "delete from car where Code in (\'{$tj}\')";
		if($db->Query($sql,1))
		{
			echo "删除成功！";
		}
		else
		{
			echo "删除失败！";
		}
		break;
	default:
		echo "";
}

　　

 

以上是关于ajax“显示弹窗详情”和“删除”功能练习的主要内容，如果未能解决你的问题，请参考以下文章

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

AJAX相关JS代码片段和部分浏览器模型

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

AJAX--显示删除练习

AJAX 练习

适合Java语言新手入门练习的框架个人网站项目，目前主要维护网络mysql和网络psql两个分支。前台包括博客、代码库、文件下载、留言、登录注册、站内搜索、分类目录等功能，后台包括上传文件、博客、代码