php+javascript 小例子
test.php:
<?php
define('D_P', realpath(getcwd()));
include_once("includes/global.inc");
switch($ac)
{
case "getWebSiteChannel":
//获取频道信息
$sql = "select * from WebSiteChannel";
$q->query($DB,$sql);
while($row = $q->getrow('key') ){
$result[] = $row;
}
$ary['result']=$result;
echo json_encode($ary);
break;
case "getAdType":
//获取广告形式信息
$sql = "select * from AdType where CID='$CID'";
$q->query($DB,$sql);
while($row = $q->getrow('key') ){
$result[] = $row;
}
$ary['result']=$result;
echo json_encode($ary);
break;
}
?>
index.html://注：用到了jquary
<!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=gb2312" />
<title>广告报价后台</title>
<style type="text/css">
<!--
.STYLE2 {
font-family: "宋体";
font-weight: bold;
}
-->
</style>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(e) {
alert("1212");
ajax_json( 'http://localhost/AdBackPro_1/test.php', {'ac':'getWebSiteChannel'}, function(data){
if(!data.result){alert("没有数据！");}
else{
addSelectValue(data.result);
}
});
});
//广告页面选择下拉框赋值及添加change事件
function addSelectValue(channelArr){
//清空select
$("#select").empty();
for(var i=0;i<channelArr.length;i++){
var s = "<option value="+channelArr[i]["CID"]+">"+channelArr[i]["CName"]+"</option>";
$("#select").append(s);
}
$("#select").change(function(){
alert("当前选择的value:"+$("#select").val()+"....当前选择的text:"+$("#select").find("option:selected").text()+"....当前选择的index:"+$("#select").get(0) .selectedIndex);
var cid = $("#select").val();
ajax_json( 'http://localhost/AdBackPro_1/test.php', {'ac':'getAdType','CID':cid}, function(data){
if(!data.result){alert("没有数据！");}
else{
refreshAdTypeList(data.result);
}
});
});
//document.getElementById("select").options.length = 0;
//for(var i=0;i<channelArr.length;i++){
//document.getElementById("select").add(new Option(channelArr[i]["CName"],i));
//}
}
//刷新广告形式信息列表
function refreshAdTypeList(adtypeArr){
alert(adtypeArr.length);
}
//jquery post 方法
function ajax_json( url_str, js_ob, fn ){
$.post(url_str , js_ob, function(data){fn(data);}, "json");
}
</script>
</head>
<body>
<div align="center">
<h1><span class="STYLE2">广告报价后台</span> </h1>
</div>
<hr>
<h2><strong>文件上传</strong></h2>
<div class="div1" id="div1">
<h4>上传excel格式报价表:</h4>
<input type="file" name="file"/>
<input type="submit" name="Submit2" value="上传" onclick="uploadFiles()"/>
</div>
<div class="div2" id="div2">
<h4>上传PDF格式报价表:</h4>
<input type="file" name="file"/>
<input type="submit" name="Submit2" value="上传" onclick="uploadFiles()"/>
</div>
<h2><strong>广告报价管理</strong></h2>
<div>请选择广告所在页面:
<select name="select" class="select" id="select">
</select>
<input type="submit" name="Submit3" value="查看"/>
</div>
<p><font color="#FF0000" size="+1">所在页面： </font>
<input type="submit" name="Submit4" value="添加广告位" />
</p>
<table width="847" border="1">
<tr>
<th width="95" scope="col"> </th>
<th width="95" scope="col"> </th>
<th width="95" scope="col"> </th>
<th width="95" scope="col"> </th>
<th width="95" scope="col"> </th>
<th width="332" scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p>
<input type="submit" name="Submit5" value="保存" />
</p>
</body>
</html>