Ajax+PHP实现的分类列表框功能示例


Posted in PHP onFebruary 11, 2019

本文实例讲述了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方法发送
}

二 运行结果

Ajax+PHP实现的分类列表框功能示例

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
php 需要掌握的东西 不做浮躁的人
Dec 28 PHP
GBK的页面输出JSON格式的php函数
Feb 16 PHP
php 中文字符入库或显示乱码问题的解决方法
Apr 12 PHP
php radio 单选框获取与保持值的实现代码
May 15 PHP
通达OA公共代码 php常用检测函数
Dec 14 PHP
PHP中最容易忘记的一些知识点总结
Apr 28 PHP
Session服务器配置指南与使用经验的深入解析
Jun 17 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
May 09 PHP
Thinkphp实现MySQL读写分离操作示例
Jun 25 PHP
php微信公众平台开发类实例
Apr 01 PHP
利用PHP绘图函数实现简单验证码功能的方法
Oct 18 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
Jun 15 PHP
Ajax+PHP实现的模拟进度条功能示例
Feb 11 #PHP
Ajax+Jpgraph实现的动态折线图功能示例
Feb 11 #PHP
php防止表单重复提交实例讲解
Feb 11 #PHP
stripos函数知识点实例分享
Feb 11 #PHP
PHP检查URL包含特定字符串实例方法
Feb 11 #PHP
PHP strripos函数用法总结
Feb 11 #PHP
PHP xpath()函数讲解
Feb 11 #PHP
You might like
php不用正则采集速度探究总结
2008/03/24 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
Python命名空间详解
2014/08/18 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
关于Python解包知识点总结
2020/05/05 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
护士辞职信模板
2014/01/20 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript