使用javascript在不同的表单字段中显示2个不同的MySQL结果

时间：2012-04-02 09:55:08

标签： php javascript mysql forms

我有一个完美的用户表单。该页面使用从外部php文件执行mysql查询的javascript脚本，并在表格上显示结果。

我想要做的是能够在表单上显示多个不同查询的结果。

我在这个例子中有4个文件。 test.php是形式 getdata1.php，它获取产品信息的mysql结果 getwhse1.php，它获取仓库信息的mysql结果 getsu1.php获取销售单位信息的mysql结果

目前，只需从getdata1.php获取结果，该脚本即可运行吗？如何更改javascripscript以允许我显示getwhse1.php和getsu1.php的结果？

以下是现有网页的代码，我希望能够输入产品代码并在每个表格字段中显示该产品代码的详细信息。

test.php的 

<html>
<head>
<title>Sales Portal</title>
<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(); 
    } 
    else 
    {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
        document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  }
</script>

</head>
<body topmargin=0>

<form name="orderform" id="orderform" action="newsale.php" method="post">

<table border=1>    

<tr>
<td>Product Code</td>
<td>Description</td>
<td>Warehouse</td>
<td>Selling Units</td>
</tr>
<tr id="r1">  
    <td width=100>
        <input size=10  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)">
    </td>
    <td width=280>
        <div align="left" id="txtHint1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="whse1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su1">&nbsp;</div>
    </td>
</tr>
<tr id="r2">  
    <td>
        <input size=10  type=number id=sku2 name=sku2 onchange="showUser(2, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint2">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse2">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su2">&nbsp;</div>
    </td>
</tr>
<tr id="r3">  
    <td>
        <input size=10  type=number id=sku3 name=sku3 onchange="showUser(3, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint3">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse3">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su3">&nbsp;</div>
    </td>
</tr>
<tr id="r4">  
    <td>
        <input size=10  type=number id=sku4 name=sku4 onchange="showUser(4, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint4">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse4">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su4">&nbsp;</div>
    </td>
</tr>
</table>
</form>

</body>
</html>

getdata1.php 

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

$con = mysql_connect('localhost', 'username', 'password');
 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 "<font color=red>".$row['Description']."</font>, ";
   if($row['SellingUnits']=="CS"){echo "<font color=red>".$row['CasesPerPallet']."</font> ";} elseif($row['SellingUnits']=="SHR") {echo "<font color=red>".$row['ShrinksPerPallet']."</font> ";}
   }}

mysql_close($con);
 ?>

getwhse1.php 

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

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

mysql_select_db("database", $con);

$sql="SELECT grouping FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);

if($rows==0){echo "&nbsp;";} else {
while($row = mysql_fetch_array($result))
   {
   echo "<font color=red>".$row['grouping']."</font>, ";
   }}

mysql_close($con);
 ?>

getsu1.php 

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

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

mysql_select_db("database", $con);

$sql="SELECT SellingUnits  FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);

if($rows==0){echo "&nbsp;";} else {
while($row = mysql_fetch_array($result))
   {
   echo "<font color=red>".$row['SellingUnits ']."</font>, ";
   }}

mysql_close($con);
 ?>

我的javascript技能不存在，如何编辑此脚本以执行所有三个mysql查询并在页面上显示结果？所有这些都是通过输入产品代码激活的？

谢谢和问候， 瑞恩

2 个答案:

答案 0 :(得分：1)

由于它们各自接受相同的GET输入，为什么不将所有三个查询合并到一个脚本中？然后将它们输出为三个JSON对象的数组。执行此操作的额外处理可以忽略不计，即使您一次只使用一个查询，您的脚本也会更容易维护，JSON会将显示与代码分开，以便于查看和管理。

如果在脚本中有所有三个查询，请创建一个新数组来存储结果。

$ results = array（'results'=＆gt; array（$ row1，$ row2，$ row3））; print json_encode（$ results）;

因为您在此响应中没有任何HTML，所以您再也不必访问您的php文件来更改输出外观的html。

然后在ajax responseText上使用JSON.parse（）。现在你的三个表结果是JavaScript对象。您甚至可以通过表名来引用它们：

var response = JSON.parse（xmlhttp.responseText）;

var row1 = response.results [0];

var row2 = response.results [1];

var row3 = response.results [3];

现在，您可以使用点和字段名称访问结果。就像row3 [i] .SellingUnits（其中i是你的row3数组的索引。换句话说，在你的JS而不是php中循环结果）。您可以像往常一样使用JS将其写入HTML。它很优雅。结果可以在JS中使用（例如，您可以对结果进行数学计算，这是您现在无法做到的。最重要的是，您不必重新访问您的php来调整某些内容（例如将ab标记更改为例如，一个h4标签。另一个优点是，如果您决定更改MySQL表，JSON将跟随更改（您仍然不必编辑您的PHP）。

答案 1 :(得分：1)

<?php
  $q=$_GET["q"];
  $con = mysql_connect('localhost', 'username', 'password');
 header('Content-type: application/json');
  if (!$con ||strlen($q)>5){ die(json_encode(array('results'=>-1)))}
  mysql_select_db("dbname", $con);
  $result=mysql_query("SELECT * FROM skudata WHERE packcode = '$q'");
  echo json_encode(array('results'=>$result));
 mysql_close($con);
 ?>

<html><head><title>Sales Portal</title>
<style type="text/css"> 
.redtext {color: red}
</style>
<script type="text/javascript">
  function showUser(userNumber, str){ 
    if (str==""){ 
      document.getElementById("txtHint" + userNumber).innerHTML="";
    }
    if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest()}
    else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")}
    xmlhttp.onreadystatechange=function(){ 
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var json = JSON.parse(xmlhttp.responseText);
    result = json.results;
    if(result==-1){
      document.getElementById('txtHint'+userNumber).innerHTML="Database error.";
      } 
    if(result.length = 0){
      document.getElementById("txtHint"+userNumber).innerHTML="INVALID PRODUCT CODE"; 
    }
    else {
      i=0;
      while(i<result.length){
        var desc=result[i].Description+"&nbsp;";
        switch(result[i].SellingUnits){
          case "CS": desc += result[i].CasesPerPallet+"<br/>";
          break;
          case: "SHR": desc += result[i].ShrinksPerPallet+"<br/>";
          break;
        }
        document.getElementById('txtHint'+userNumber).innerHTML = desc;
        document.getElementById('whse'+userNumber).innerHTML=result[i].grouping+"<br\>";
        document.getElementById('su'+userNumber).innerHTML=result[i].SellingUnits+"<br/>";
        i++;
      } 
      xmlhttp.open("GET","getdata1.php?q="+str,true); 
      xmlhttp.send(); 
     }
</script>
</head>
<body topmargin=0>
<form name="orderform" id="orderform" action="newsale.php" method="post">
<table border=1>
<tr>
<td>Product Code</td>
<td>Description</td>
<td>Warehouse</td>
<td>Selling Units</td>
</tr>
<tr id="r1">  
<td width=100>
    <input size=10  type="number" id="sku1" name="sku1" onchange="showUser(1, this.value)">
</td>
<td width=280>
    <div align="left" id="txtHint1" class="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="whse1" class="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="su1" class="redtext">&nbsp;</div>
</td>
</tr>
<tr id="r2">  
<td>
    <input size=10  type="number" id="sku2" name="sku2" onchange="showUser(2, this.value)">
</td>
<td>
    <div align="left" id="txtHint2" class="redtext">&nbsp;</div>
</td>
<td>
    <div align="left" id="whse2" class ="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="su2" class="redtext">&nbsp;</div>
</td>
</tr>
<tr id="r3">  
<td>
    <input size=10  type=number id=sku3 name=sku3 onchange="showUser(3, this.value)">
</td>
<td>
    <div align="left" id="txtHint3" class="redtext">&nbsp;</div>
</td>
<td>
    <div align="left" id="whse3" class="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="su3" class="redtext">&nbsp;</div>
</td>
</tr>
<tr id="r4">  
<td>
    <input size=10  type=number id=sku4 name=sku4 onchange="showUser(4, this.value)">
</td>
<td>
    <div align="left" id="txtHint4" class="redtext">&nbsp;</div>
</td>
<td>
    <div align="left" id="whse4" class="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="su4" class="redtext">&nbsp;</div>
</td>
</tr>
</table>
</form>
</body>
</html>

我没有测试过这段代码，但错误应该很容易在浏览器控制台中找到。 php不允许$ q超过5个字符以防止注入。

相关问题
最新问题