php后台处理程序+ajax（jquery）

这次要做两个例子，第一个是类似预览的。

效果，会弹出一个窗口，右上角x号关闭。

先把程序贴出来，后续作补充。

css代码如下

table { font-size:12px; border:1px solid #dedede; margin:0 auto; }
table tr td { border: 1px solid #B1CDE3; background: #fff; font-size:12px; padding: 3px 3px 3px 8px; color: #4f6b72; }
table tr .title { text-align:left; }
.window{ width:480px; background-color:#d0def0; position:absolute; padding:2px; margin:5px; display:none; } 
.window .close { position:absolute; right:0px; top:0px; width:40px; height:20px; text-align:center; color:red; font-weight:bold; cursor:pointer; }

提取数据，我就不多说了，通过数据库

$list = $dbObj2->getAll($sql);

接下来就是程序端和前端显示，php，html混编的，大家一看都知道。

		<div>在售商品列表</div>
		<div class="container">
			<table>
				<tr>
					<th>名称</th>
					<th colspan="2">生成详情页</th>
					<th>编辑宝贝</th>
					<th>状态</th>
					<th>预览</th>
					<th>创建时间</th>
					<th>列表刷新时间</th>
					<th>图片生成时间</th>
				</tr>
<?php 
foreach( $list as $k => $v )
{
	switch($v['status'])
	{
		case 0 :
			$str = "未生成";
			break;
		case 1 :
			$str = "已生成";
			break;
		case 2 :
			$str = "已删除";
			break;
	}
	/**
	 * 关于预览，如果数据库存的有图，那么预览，如果没有预览不可实现。jquery。
	 */
	

?>
				<tr>
					<td class="title"><?php echo $v['title']; ?></td>
					<td><a href="javascript:create_picture('<?php echo $v['gid']; ?>')">仅图片生成</a></td>
					<td><a href="create_pic2.php?gid=<?php echo $v['gid'];?>" target="_blank">生成图文</a></td>
					<td><a href="#" target="_blank">编辑宝贝</a></td>
					<td><?php echo $str; ?></td>
					<td><a href="javascript:view('<?php echo $v['gid']; ?>')">预览</a></td>
					<td><?php echo timeFormat($v['create_time']); ?></td>
					<td><?php echo timeFormat($v['update_time']); ?></td>
					<td><?php echo timeFormat($v['create_pic_time']); ?></td>
				</tr>
<?php
}
?>
			</table>
		</div>
		<div class="window" id="center"><div class="post"></div><div class="close">关闭</div></div>

主要是这一句。

<td><a href="javascript:view('<?php echo $v['gid']; ?>')">预览</a></td>

以下是相关的javascript

function view(index){
	$.get("view.php",{ gid:index },function(data){
		$(".window .post").html(data);
		popCenterWindow();
	})		
}
var windowHeight; 
var windowWidth; 
var popWidth; 
var popHeight; 
function popCenterWindow(){ 
	var windowHeight=$(window).height(); 
	var windowWidth=$(window).width(); 
	var popHeight=$(".window").height(); 
	var popWidth=$(".window").width();
	var popY=(windowHeight-popHeight)/2; 
	var popX=(windowWidth-popWidth)/2; 
	//alert(popY);
	$("#center").css("top",popY).css("left",popX).slideToggle("slow"); 
	closeWindow();
} 
function closeWindow(){
	$(".window .close").click(function(){
		$(this).parent().hide("slow"); 
	})
}

其实这一段js也很容易理解，获取，定位，淡入淡出。关闭窗口。

最后的php代码view.php，

$gid = isset($_GET['gid'])? $_GET['gid'] : exit("paramer error");//商品id
$dbObj = new Db('goods_info');
$sql = "SELECT picture FROM goods_info WHERE gid='".$gid."'";
$picture = $dbObj->getOne($sql);
if(isset($picture['picture']))
{
	
	$handle = fopen("cache/pic/".$gid.".jpg","w");//打开文件准备写入
	fwrite($handle,$picture['picture']);//写入，这里的$picture['picture']就是从数据库中取出来的图片二进制。
	fclose($handle);
?>

<div style="text-align:center;"><img height="824" src="cache/pic/<?php echo $gid; ?>.jpg"></div>
<?php
}
else
{
	echo ("没有图片或者图片备份");
}

这段代码是不是有点眼熟，呵呵，就是之前的图片2进制的存取，ok，这就是为之前的2进制图片，生成预览。

ok这第一个就放到这里了。后续第二个其实和这个差不多。

最后编辑：（2014年3月13日16:54:18）