当前位置： 移动技术网 > IT编程>开发语言>PHP > Ajax+PHP实现的分类列表框功能示例

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

2019年05月28日  | 移动技术网IT编程  | 我要评论

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

二 运行结果

更多关于php相关内容感兴趣的读者可查看本站专题：《php+ajax技巧与应用小结》、《php网络编程技巧总结》、《php基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网