快捷導(dǎo)航

Ajax+PHP實現(xiàn)的分類列表框功能示例

更新時間：2019年02月11日 12:07:49 作者：chengqiuming

這篇文章主要介紹了Ajax+PHP實現(xiàn)的分類列表框功能,涉及php結(jié)合ajax交互查詢數(shù)據(jù)庫與列表框構(gòu)建相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了Ajax+PHP實現(xiàn)的分類列表框功能。分享給大家供大家參考，具體如下：

一代碼

conn.php：

<?php
  $conn = mysql_connect("localhost", "root", "root") or die("連接數(shù)據(jù)庫服務(wù)器失?。?.mysql_error()); //連接MySQL服務(wù)器
  mysql_select_db("db_database27",$conn); //選擇數(shù)據(jù)庫db_database27
  mysql_query("set names utf8"); //設(shè)置數(shù)據(jù)庫編碼格式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");//包含數(shù)據(jù)庫連接文件
 $sql=mysql_query("select * from tb_commotype group by ptype");//按大類分組查詢
 while($row=mysql_fetch_array($sql)){//循環(huán)輸出下拉列表框選項
  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">&nbsp;</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);//頁面載入即執(zhí)行函數(shù)，顯示子類內(nèi)容
</script>
</body>
</html>

type.php：

<?php
  include_once("conn/conn.php");//包含數(shù)據(jù)庫連接文件
 //echo $_GET['ptype'];
 //$ptype=iconv("gb2312","utf-8",$_GET['ptype']);//把參數(shù)值做編碼轉(zhuǎn)換
 $sql=mysql_query("select stype from tb_commotype where ptype='".$_GET['ptype']."'");//查詢子類內(nèi)容
 echo "<select name='stype' id='stype'>";//輸出html
 while($row=mysql_fetch_array($sql)){//循環(huán)輸出列表框選項中子類內(nèi)容
  echo "<option value='".$row['stype']."'>".$row['stype']."</option>";
 }
 echo "</select>";//輸出html
?>

index.js：

function changetype(v){
 var xml;
 if(window.ActiveXObject){//如果是瀏覽器支持ActiveXObjext則創(chuàng)建ActiveXObject對象
  xml=new ActiveXObject('Microsoft.XMLHTTP');
 }else if(window.XMLHttpRequest){//如果瀏覽器支持XMLHttpRequest對象則創(chuàng)建XMLHttpRequest對象
  xml=new XMLHttpRequest();
 }
  xml.open("GET","type.php?ptype="+v,true);//使用GET方法調(diào)用type.php并傳遞參數(shù)的值
  xml.onreadystatechange=function(){//當(dāng)服務(wù)器準(zhǔn)備就緒執(zhí)行回調(diào)函數(shù)
   if(xml.readyState==4 && xml.status==200){//如果服務(wù)器已經(jīng)傳回信息并未發(fā)生錯誤
    var msg=xml.responseText;//把服務(wù)器傳回的值賦給變量msg
 //document.getElementById("showtype").innerHTML=msg;
 alert(msg);
   showtype.innerHTML=msg;//把傳回的值顯示在id=showtype的元素中
   }
  }
  xml.send(null);//不發(fā)送任何數(shù)據(jù)，因為數(shù)據(jù)已經(jīng)使用請求URL通過GET方法發(fā)送
}

二運行結(jié)果