AJAX+PHP+MYSQL实现两个下拉框间的数据联动

10 篇文章 0 订阅

这个实例是我从项目中抽取出来的,有点乱,但是实现了无刷新的异动。刚学ajax,写的有点粗糙,凑合看吧。将inv_open.php文件放入www下,访问方式:http://localhost/inv_open.php。

代码如下:

1.inv_open:

<!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=gb2312" />
 <title>ajax appliction sample:by enjoyxp 2007.10.17 21:15</title>
 <script type="text/javascript">
  function checkinput(form){
  if(add_inv_form.inv_plant.value=="0"){
   alert("请选择工厂名称!");
   return(false);
  }
  if(add_inv_form.inv_loc.value=="0"){
   alert("请选择库房名称!");
   return(false);
  }
  /* re=/^[1-9]+[0-9]{0,14}$|^[0-9]{0,15}.[0-9]+$/;
  if(!re.test(add_inv_form.inv_oh_qty.value)){
   alert("目前数量无效,请重新输入!");
   add_inv_form.inv_oh_qty.value="";
   add_inv_form.inv_oh_qty.select();
   return(false);
  } */
 }

 function displayData() {
  xmlhttp = createXMLHttpRequest();
  if (xmlhttp) {
   var postStr="plant="+ document.add_inv_form.inv_plant.value ;
   xmlhttp.open("POST", "inv_openTest.php", true);
   xmlhttp.onreadystatechange = updatePage;
   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");  
   xmlhttp.send(postStr);
  }
 }

 function updatePage() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      //获取伺服器的回应:xml数据
   var xmlDoc = xmlhttp.responseXML;
   //用两个数组接收xml数据
   var result = new Array();
   var result2 = new Array();
   var len=xmlDoc.getElementsByTagName("ids").length;
   for (i=0; i<len; i++){
    var p = xmlDoc.getElementsByTagName("ids")[i];
    var pval = p.firstChild.nodeValue;
    result[i] = pval;
    
    var p2 = xmlDoc.getElementsByTagName("descs")[i];
    var pval2= p2.firstChild.nodeValue;
    result2[i] = pval2;
   }

   //测试从伺服器获取的数据(换行)是否正确
   var results="";
   for(j=0; j<len; j++){
    results=results+result[j]+String.fromCharCode(10);
   }
   //alert("results="+results);
   
   //清空select控件的内容
   document.add_inv_form.inv_loc.options.length = 0; 
   //将接收到的两个数组中的数据分别作为text和value放入select中
   for(k=0; k<len; k++){
    var oOption=document.createElement("Option");  
    oOption.text=result[k]+"-"+result2[k];  
    oOption.value=result[k];  
    document.add_inv_form.inv_loc.add(oOption);   
   }
  }
 }

 function createXMLHttpRequest(){
  var XMLhttpObject = null;
  try{
   XMLhttpObject = new XMLHttpRequest();
  }catch(e){
   try{
    XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
   }catch(e){
    try{
     XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
     return null;
    }
   }
  }
  return XMLhttpObject;
 }
  
    function submitData(){
  xmlhttp = createXMLHttpRequest();
  if (xmlhttp) {
   xmlhttp.open("GET", "submit.php", true);
   xmlhttp.onreadystatechange = succeed;
   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");  
   xmlhttp.send(null);
  }
 }
 
 function succeed(){
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       var doc=xmlhttp.responseText;
    alert(doc);
   }
 }
   </script>
   </head>
  
   <body>
    <?php
     function db_link(){
   $access_id = "root";
   $db_name   = "inv";
   @ $db = mysql_connect('localhost', $access_id, '831025') or
    die("Could not connect to database. Please contact with IT supporting team ASAP.");
   mysql_query("SET NAMES 'GBK'");
   mysql_select_db($db_name);
   return $db;
        }
     $link = db_link(); 
  
  $plant_desc_sql  = "SELECT `plant_id`,`plant_desc` FROM `plant` ";
  $plant_desc_res  = mysql_query($plant_desc_sql); 
  $plant_desc_sql1 = "SELECT * FROM `plant` WHERE `plant_id`='".$_POST['inv_plant']."'";
  $plant_desc_res1 = mysql_query($plant_desc_sql1);
  $rows1_plant     = mysql_fetch_array($plant_desc_res1);
    ?>
    <form name="add_inv_form"  οnsubmit="return checkinput(this)">
    <div id="div0">
     <fieldset>
      <legend>ajax sample</legend>
       <table cellpadding="0" cellspacing="1">
       <tr>
         <td>Plant:</td>
      <td><select name="inv_plant" οnchange="displayData();">
           <option value="0">--please select plant--
        <?php
        while($rows_plant=mysql_fetch_array($plant_desc_res)){
          if($rows_plant['plant_id']==$rows1_plant['plant_id']){
          echo "<option value='".$rows_plant['plant_id']."' selected='selected'>".$rows_plant['plant_id'].'-'.$rows_plant['plant_desc'];}
       else{
          echo "<option value='".$rows_plant['plant_id']."'>".$rows_plant['plant_id'].'-'.$rows_plant['plant_desc'];}
         }
        echo '</select>';
      ?>
      </td>
     
      <td>Location:</td>
      <td><select name="inv_loc">
       <option value="0">--please select location--</select></td>
      <td><input type="button" name="inv_add" value="Save" οnclick="submitData()"></td>
       </tr>
   </table>
   </fieldset>
   </div>
      </form>
   </body>
</html>

<?php
 mysql_close($link);
?>

2.inv_openTest.php:

<?php
function db_link(){
 $access_id = "root";
 $db_name   = "inv";
 @ $db = mysql_connect('localhost', $access_id, '831025') or
  die("Could not connect to database. Please contact with IT supporting team ASAP.");
 mysql_query("SET NAMES 'GBK'");
 mysql_select_db($db_name);
 return $db;
}
$link = db_link(); 

$inv_plant  = $_POST['plant'];
$loc_sql    = "SELECT * FROM loc WHERE loc_plant ='".$inv_plant."' AND loc_act = '1'";
$loc_result = mysql_query($loc_sql);

header("Content-Type:text/xml");//accessary code
echo '<?xml version="1.0" encoding="gb2312" ?>
  <locations>';
  while($loc_rs=mysql_fetch_array($loc_result)){
   echo '<ids>'.$loc_rs['loc_id'].'</ids>';
   echo '<descs>'.$loc_rs['loc_desc'].'</descs>';
  } 
echo '</locations>';

mysql_close($link);
?>

 

3.submit.php:

<?php
  echo "succeed";
?>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值