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 相关文章推荐
Zend Studio (eclipse)使用速度优化方法
Mar 23 PHP
深入php常用函数的使用汇总
Jun 08 PHP
在PHP上显示JFreechart画的统计图方法
Nov 03 PHP
浅谈php提交form表单
Jul 01 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
Mar 23 PHP
PHP 的比较运算与逻辑运算详解
May 12 PHP
thinkPHP简单遍历数组方法分析
May 16 PHP
php编译安装php-amq扩展简明教程
Jun 25 PHP
php把时间戳转换成多少时间之前函数的实例
Nov 16 PHP
php生成0~1随机小数的方法(必看)
Apr 05 PHP
php-fpm重启导致的程序执行中断问题详解
Apr 29 PHP
Laravel框架验证码类用法实例分析
Sep 11 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
python格式化字符串实例总结
2014/09/28 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
python 通过exifread读取照片信息
2020/12/24 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
JNI的定义
2012/11/25 面试题
Linux的主要特性
2014/10/06 面试题
小学国庆节活动方案
2014/02/11 职场文书
矿泉水广告词
2014/03/20 职场文书
医院搬迁方案
2014/06/14 职场文书
出生医学证明书
2014/09/15 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
python实现的web监控系统
2021/04/27 Python