Ajax+PHP实现的分类列表框功能示例
时间:2022-07-27
本文章向大家介绍Ajax+PHP实现的分类列表框功能示例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了Ajax+PHP实现的分类列表框功能。分享给大家供大家参考,具体如下:
一 代码
conn.php:
<?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
?
index.php:
<!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
type.php:
<?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' ";//输出html
while($row=mysql_fetch_array($sql)){//循环输出列表框选项中子类内容
echo "<option value='".$row['stype']."' ".$row['stype']."</option ";
}
echo "</select ";//输出html
?
index.js:
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方法发送
}
二 运行结果
- 两个元素定位,要求子元素垂直居中
- 在Spring Boot框架下使用WebSocket实现消息推送
- Linux上安装Zookeeper以及一些注意事项
- Nginx+Tomcat搭建集群,Spring Session+Redis实现Session共享
- Shiro中的授权问题(二)
- Shiro中的授权问题
- Spring Cloud中服务的发现与消费
- 使用Spring Cloud搭建高可用服务注册中心
- 从Netflix的Hystrix框架理解服务熔断和服务降级
- 使用Spring Cloud搭建服务注册中心
- 技术分享 | kafka的使用场景以及生态系统
- WebSocket刨根问底(二)
- WebSocket刨根问底(三)之群聊
- SDNLAB群分享(四):利用ODL下发流表创建VxLAN网络
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- codeforces 1374D(数学)
- Yet Another Walking Robot (Map)
- HDU 1059(多重背包)
- 扩散(二分答案+并查集)
- JAVA入门学习十二
- YOLO算法最全综述:从YOLOv1到YOLOv5
- codeforce893C (并查集)
- codeforces 544C(完全背包求方案数)
- SCU2511(单调栈)
- B. Ternary String(贪心)
- codeforces 940B(贪心)
- codeforces 429A(dfs)
- codeforces 1182B (DFS)
- codeforces 509B(构造,思维)
- codeforces 1257C(map)