应用Ajax技术制作分类列表框
来源:互联网 发布:视频监控端口号 编辑:程序博客网 时间:2024/06/06 07:32
一 代码
<?php $conn = mysql_connect("localhost", "root", "root") or die("连接数据库服务器失败!".mysql_error()); //连接MySQL服务器 mysql_select_db("db_database27",$conn);//选择数据库db_database27 mysql_query("set names utf8");//设置数据库编码格式utf8?>
<!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></head><body><script language="javascript" src="index.js"></script><form name="form" method="post" action=""> <table width="419" border="0" align="center" cellspacing="1" bgcolor="#9999CC"> <tr> <td height="36" colspan="3" bgcolor="#FFFFFF"><font color="#0066CC" size="+2">添加商品</font></td> </tr> <tr> <td width="122" height="26" bgcolor="#FFFFFF" align="right">商品名称:</td> <td height="26" colspan="2" bgcolor="#FFFFFF"><input type="text" name="name" /></td> </tr> <tr> <td height="26" bgcolor="#FFFFFF" align="right">商品类别:</td> <td width="64" height="26" bgcolor="#FFFFFF"><select name="ptype" id="ptype" onchange="changetype(this.value)"> <?php include_once("conn/conn.php");//包含数据库连接文件$sql=mysql_query("select * from tb_commotype group by ptype");//按大类分组查询while($row=mysql_fetch_array($sql)){//循环输出下拉列表框选项 echo "<option value='".$row['ptype']."'>".$row['ptype']."</option>";}?> </select></td> <td width="219" height="26" bgcolor="#FFFFFF" id="showtype" name="showtype"></td> </tr> <tr> <td height="26" bgcolor="#FFFFFF" align="right">商品价格:</td> <td height="26" colspan="2" bgcolor="#FFFFFF"><input type="text" name="price" /></td> </tr> <tr> <td height="26" bgcolor="#FFFFFF"> </td> <td height="26" colspan="2" bgcolor="#FFFFFF"><input type="submit" name="Submit" value="提交" /></td> </tr> </table></form><script language="javascript"> changetype(document.getElementById("ptype").value);//页面载入即执行函数,显示子类内容</script></body></html>
<?php include_once("conn/conn.php");//包含数据库连接文件//echo $_GET['ptype'];//$ptype=iconv("gb2312","utf-8",$_GET['ptype']);//把参数值做编码转换$sql=mysql_query("select stype from tb_commotype where ptype='".$_GET['ptype']."'");//查询子类内容echo "<select name='stype' id='stype'>";//输出htmlwhile($row=mysql_fetch_array($sql)){//循环输出列表框选项中子类内容 echo "<option value='".$row['stype']."'>".$row['stype']."</option>";}echo "</select>";//输出html?>
function changetype(v){var xml;if(window.ActiveXObject){//如果是浏览器支持ActiveXObjext则创建ActiveXObject对象 xml=new ActiveXObject('Microsoft.XMLHTTP');}else if(window.XMLHttpRequest){//如果浏览器支持XMLHttpRequest对象则创建XMLHttpRequest对象 xml=new XMLHttpRequest();} xml.open("GET","type.php?ptype="+v,true);//使用GET方法调用type.php并传递参数的值 xml.onreadystatechange=function(){//当服务器准备就绪执行回调函数 if(xml.readyState==4 && xml.status==200){//如果服务器已经传回信息并未发生错误 var msg=xml.responseText;//把服务器传回的值赋给变量msg//document.getElementById("showtype").innerHTML=msg;alert(msg); showtype.innerHTML=msg;//把传回的值显示在id=showtype的元素中 } } xml.send(null);//不发送任何数据,因为数据已经使用请求URL通过GET方法发送}
二 运行结果
阅读全文
0 0
- 应用Ajax技术制作分类列表框
- 应用Ajax技术实现无刷新的级联下拉列表
- 流媒体技术应用分类
- AJAX技术应用详解
- ajax技术的应用
- Ajax制作的下拉列表三级联动
- AJAX经典应用之动态加载列表框
- Wordpress Categories分类函数的应用 显示分类列表
- AJAX应用到的技术
- Ajax技术应用的站点
- 应用AJAX技术完成验证
- AJAX技术与应用浅析
- Struts中应用Ajax技术
- 应用Ajax技术删除数据
- CSS制作一个商品分类列表,边框是圆角弧度
- AJAX技术经验谈:技术原理及应用
- Ajax下拉列表框
- 一个简单的Ajax下拉列表应用
- 在php中应用Ajax技术实现博客文章添加类别
- 第一课
- 使用jQuery制作级联下拉列表框
- 应用Ajax技术删除数据
- php写接口跨域问题
- 应用Ajax技术制作分类列表框
- Sublime text 3最新版破解方法
- Spring----AspectJ的AOP
- 注意啦,维谛技术(Vertiv)品牌正式启用了,来头可不小
- java反射简单例子
- Mapreduce 过程中 使用List保存Text元素被修改
- Ajax+Jpgraph制作动态折线图
- 2017中国混合云十大案例评选 ZStack服务最多是偶然的吗?
- Atom 插件无法安装的问题以及本地离线安装的方法