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 购物车的例子
May 04 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
Oct 22 PHP
PHP 时间日期操作实战
Aug 26 PHP
奇怪的PHP引用效率问题分析
Mar 23 PHP
php时区转换转换函数
Jan 07 PHP
php命令行使用方法和命令行参数说明
Apr 08 PHP
11个PHPer必须要了解的编程规范
Sep 22 PHP
隐性调用php程序的方法
Jun 13 PHP
php+mysql实现无限级分类
Nov 11 PHP
laravel获取不到session的三种解决办法【推荐】
Sep 16 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
Oct 15 PHP
Laravel框架定时任务2种实现方式示例
Dec 08 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 无限级缓存的类的扩展
2009/03/16 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
Smarty变量用法详解
2016/05/11 PHP
PHP简单遍历对象示例
2016/09/28 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
pymysql模块的操作实例
2019/12/17 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
pip install命令安装扩展库整理
2021/03/02 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
光荣入党自我鉴定
2014/01/22 职场文书
高中教师考核方案
2014/05/18 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
工作失误检讨书
2015/01/26 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书