javascript - 从mysql中获取其他字段并显示在表中

时间：2012-04-03 20:04:40

标签： php javascript mysql forms

我有一个从mysql中获取数据的javascript，并在没有页面刷新的情况下以html格式显示它。鉴于我对javascript的不存在的知识，我得到了以下脚本，得到了StackOverflow社区的大力协助，即@Brant Olsen。

该脚本可以很快地获取3个mysql结果字段。我想为此添加另外两个字段，并以我的html格式显示它们。

工作脚本是：

<script type="text/javascript">  
  function showUser(userNumber, str)  
  {  
    if (str=="")  
    {  
      document.getElementById("txtHint" + userNumber).innerHTML="";  
      return;  
    }    
    if (window.XMLHttpRequest)  
    {// code for IE7+, Firefox, Chrome, Opera, Safari  
      xmlhttp=new XMLHttpRequest();  
    }  

    xmlhttp.onreadystatechange=function()  
    {  
      if (xmlhttp.readyState==4 && xmlhttp.status==200)  
      {  
        //document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
        var responseText = xmlhttp.responseText; 
        var description = responseText; 
        var warehouse = ""; 
        var sellingUnits = ""; 
        if (responseText.indexOf("NOT A VALID") == -1) 
        { 
          description = responseText.substring(12, responseText.indexOf(",Warehouse:"));  
          warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:"));  
          sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+14);  
        } 

        document.getElementById("whse" + userNumber).innerHTML = warehouse;  
        document.getElementById("txtHint" + userNumber).innerHTML = description;  
        document.getElementById("su" + userNumber).innerHTML = sellingUnits; 

      }  
    }  
    xmlhttp.open("GET","getdata1.php?q="+str,true);  
    xmlhttp.send(); 
  } 
</script>

getdata1.php是： 

<?php 
 $q=$_GET["q"]; 

$con = mysql_connect('localhost', 'dbuser', 'dbpass'); 
 if (!$con) 
   { 
   die('Could not connect: ' . mysql_error()); 
   } 

mysql_select_db("dbname", $con); 


$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'"; 
$result = mysql_query($sql); 
$rows=mysql_num_rows($result); 

if($rows==0){echo "<font color=red><b>NOT A VALID PRODUCT CODE</b></font>";} else { 
while($row = mysql_fetch_array($result)) 
 { 
   echo "Description:" . $row['Description'] . ",Warehouse:" . $row['Grouping'] . ",SellingUnits:" . $row['SellingUnits']; 
 } 
} 

mysql_close($con); 
 ?>

我已将getdata1.php更改为我要传递给html表单的其他字段：

$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet,if(SellingUnits='cs', CasesPerPallet,ShrinksPerPallet) as SUQTY FROM skudata WHERE packcode = '".$q."'"; 
$result = mysql_query($sql); 
$rows=mysql_num_rows($result); 

if($rows==0){echo "<font color=red><b>NOT A VALID PRODUCT CODE</b></font>";} else { 
while($row = mysql_fetch_array($result)) 
 { 
   echo "Description:" . $row['Description'] . ",Warehouse:" . $row['Grouping'] . ",SellingUnits:" . $row['SellingUnits'] . ",SUQTY:" . $row['SUQTY'] . ",Category:" . $row['Category']; ; 
 } 
}

从这里我正在努力正确编码额外的两个字段。表格行的一个例子如下：

<tr id="r1">  
    <td>
        <input type=checkbox name=kvi1 id=kvi1 value=1>
    </td>
    <td>
        <input size=10  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)"><a href="sku.php" target="_blank"><img src=q.png border=0></a>
    </td>
    <td>
        <div align="left" id="txtHint1">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse1">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="su1">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="suqty1">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="category1">&nbsp;</div>
    </td>
</tr>

我已经编辑了如下javascript而没有成功，有人可以帮忙吗？

<script type="text/javascript">  
  function showUser(userNumber, str)  
  {  
    if (str=="")  
    {  
      document.getElementById("txtHint" + userNumber).innerHTML="";  
      return;  
    }    
    if (window.XMLHttpRequest)  
    {// code for IE7+, Firefox, Chrome, Opera, Safari  
      xmlhttp=new XMLHttpRequest();  
    }  

    xmlhttp.onreadystatechange=function()  
    {  
      if (xmlhttp.readyState==4 && xmlhttp.status==200)  
      {  
        //document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
        var responseText = xmlhttp.responseText; 
        var description = responseText; 
        var warehouse = ""; 
        var sellingUnits = ""; 
        var SUQTY = ""; 
        var Category = ""; 
        if (responseText.indexOf("NOT A VALID") == -1) 
        { 
          description = responseText.substring(12, responseText.indexOf(",Warehouse:"));  
          warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:"));  
          sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+11, responseText.indexOf(",SUQTY:")); 
          suqty = responseText.substring(responseText.indexOf(",SUQTY:")+11, responseText.indexOf(",Category:")); 
          category = responseText.substring(responseText.indexOf(",Category:")+14);  
        } 

        document.getElementById("whse" + userNumber).innerHTML = warehouse;  
        document.getElementById("txtHint" + userNumber).innerHTML = description;  
        document.getElementById("su" + userNumber).innerHTML = sellingUnits; 
        document.getElementById("suqty" + userNumber).innerHTML = SUQTY; 
        document.getElementById("category" + userNumber).innerHTML = Category; 


      }  
    }  
    xmlhttp.open("GET","getdata1.php?q="+str,true);  
    xmlhttp.send(); 
  } 
</script>

谢谢， 莱恩

1 个答案:

答案 0 :(得分：2)

我知道你不会喜欢这个答案，因为它需要你修改你的代码，但我会尽力帮助。

实际上，通过ajax调用在PHP和JS之间发送的这种性质的任何类型的数据应该使用原生于＆gt; = PHP5.3的JSON。这样做的好处是Ajax和PHP可以来回传递数据，而无需在应用程序级别进行任何真正的解析。此外，它非常容易改变。如果您需要再次更改，这是完美的。

注意：如果您的PHP版本低于5.3并且您尚未努力安装JSON插件，请不要使用下面的代码。此外，JSON对象在旧版浏览器中不是原生的。 http://caniuse.com/json

PHP Side

使while循环中的echo看起来像这样：

echo json_encode(array(
    "description" => $row['Description'],
    "warehouse" => $row['Grouping'],
    "sellingunits" => $row['SellingUnits'],
    "suqty" => $row['SUQTY'],
    "category" => $row['Category']
));

JS Side 

var data = {};
if (responseText.indexOf("NOT A VALID") == -1) { 
    data = JSON.parse(responseText);
}
// Check the values or just place an empty string if undefined
document.getElementById("whse" + userNumber).innerHTML = data.warehouse || '';  
document.getElementById("txtHint" + userNumber).innerHTML = data.description || '';  
document.getElementById("su" + userNumber).innerHTML = data.sellingunits || ''; 
document.getElementById("suqty" + userNumber).innerHTML = data.suqty || ''; 
document.getElementById("category" + userNumber).innerHTML = data.category || '';
相关问题
最新问题