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实现登陆验证码(类似条行码状)
Oct 09 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
Dec 11 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
Apr 28 PHP
openflashchart 2.0 简单案例php版
May 21 PHP
使用PHP下载CSS文件中的图片的代码
Sep 24 PHP
PHP内核探索:变量概述
Jan 30 PHP
PHP实现简单爬虫的方法
Jul 29 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
Dec 14 PHP
php面试中关于面向对象的相关问题
Feb 13 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
Mar 26 PHP
php+mysql实现的无限分类方法类定义与使用示例
May 27 PHP
PHP中strval()函数实例用法
Jun 07 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
再说下636单管机
2021/03/02 无线电
SONY ICF-SW7600的电路分析
2021/03/02 无线电
javascript 二维数组的实现与应用
2010/03/16 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
使用pip发布Python程序的方法步骤
2018/10/11 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
班组长岗位职责
2014/03/03 职场文书
委托书范本
2014/04/02 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
公路绿化方案
2014/05/12 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
公司转让协议书
2016/03/19 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis
mysql数据库如何转移到oracle
2022/12/24 MySQL