Ajax+PHP实现的分类列表框功能示例
时间:2019-02-11
这篇文章主要介绍了Ajax+PHP实现的分类列表框功能,涉及php结合ajax交互查询数据库与列表框构建相关操作技巧,需要的朋友可以参考下
本文实例讲述了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方法发送 }
二 运行结果
更多关于PHP相关内容感兴趣的读者可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家PHP程序设计有所帮助。
- 数据转换:从单体式应用到微服务的低风险演变
- JDK8 stream toMap() java.lang.IllegalStateException: Duplicate key异常解决(key重复)
- 如约而至,Java 10 正式发布!
- Intellij IDEA查看所有断点
- Spring Boot国际化支持
- 有记忆会推理的可微分神经计算机,DeepMind现在开源了代码
- Spring Boot整合Thymeleaf模板引擎
- Spring Boot实现热部署
- Java中的宏变量,宏替换详解。
- 类、变量、块、构造器、继承初始化顺序,终极解答。
- Spring Boot Debug调试
- Maven精选系列--classifier元素妙用
- PostgreSQL里面的一些命令小结
- Java中创建String的两道面试题及详解
- 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 数组属性和方法
- Python csv文件记录流程代码解析
- 简单的Python人脸识别系统
- PHP实现的微信公众号扫码模拟登录功能示例
- PHP获取数据库表中的数据插入新的表再原删除数据方法
- python3 中时间戳、时间、日期的转换和加减操作
- PHP通过文件路径获取文件名的实例代码
- PHP常用正则表达式精选(推荐)
- PHP观察者模式实例分析【对比JS观察者模式】
- PHP实现图片压缩
- Python库安装速度过慢解决方案
- PHP按一定比例压缩图片的方法
- PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
- django restframework serializer 增加自定义字段操作
- 深入理解 PHP7 中全新的 zval 容器和引用计数机制
- python中可以声明变量类型吗