Ajax+PHP實現的分類列表框功能示例

2024-05-05 00:06:31

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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,分類列表框