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 相关文章推荐
自动跳转中英文页面
Oct 09 PHP
BBS(php &amp; mysql)完整版(五)
Oct 09 PHP
PHP 批量更新网页内容实现代码
Jan 05 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
Nov 10 PHP
解析php5配置使用pdo
Jul 03 PHP
php中3种方法删除字符串中间的空格
Mar 10 PHP
php实现encode64编码类实例
Mar 24 PHP
Yii中CGridView禁止列排序的设置方法
Jul 12 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
Dec 24 PHP
PHP简单验证码功能机制实例详解
Mar 27 PHP
PHP大文件分块上传功能实例详解
Jul 22 PHP
php设计模式之适配器模式原理、用法及注意事项详解
Sep 24 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结束标签的使用细节探讨及联想
2013/03/04 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python操作Excel之xlsx文件
2017/03/24 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
python实现批量转换图片为黑白
2020/06/16 Python
详解Python 中的容器 collections
2020/08/17 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
高三自我鉴定范文
2013/10/19 职场文书
庆八一活动方案
2014/01/25 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
国际金融专业自荐信
2014/07/05 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
团代会开幕词
2015/01/28 职场文书
运动会通讯稿600字
2015/07/20 职场文书
认识实习感想
2015/08/10 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS