在页面上显示 mysql 数据而不刷新页面 - 下拉列表

Question

我需要一些帮助，

我有一个带有下拉列表的 PHP 页面，由 mysql 数据库查询填充。 我希望能够在其他表格单元格中显示所选选项的数据库详细信息。 理想情况下，这可以在不刷新页面的情况下实现。

除此之外，该表将包含多达 75 行（车辆上的托盘 - 这是用于销​​售工具），因此需要使用 while 语句或其他东西来实现这一点。每行都会有一个选择框来选择一个packcode。

我的下拉列表代码如下，该表目前仅包含 5 行。

我知道除此之外我还需要使用 ajax 或 javascript？

如果有人有示例脚本或可以使用我的代码作为示例，我将不胜感激。

<?

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

  mysql_select_db("dbname", $con);

  $packcodesql="SELECT packcode from skudata order by packcode"; 
  $resultpackcode=mysql_query($packcodesql); 
  $optionspackcode=""; 

  while ($row=mysql_fetch_array($resultpackcode)) { 
     $packcode=$row["packcode"]; 
     $optionspackcode.="<OPTION VALUE=\"$packcode\">".$packcode; 
  } 
?>

<table border=1>
<tr>
  <td>Pack Code</td>
  <td>Category</td>
  <td>Selling Units</td>        
  <td>Full Pallet QTY</td>
  <td>Order QTY</td>
</tr>
<Tr>
  <td>
    <SELECT NAME=packcode1 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
  </td>
  <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode1" -->
  </td>
  <td>
    <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode1" -->
  </td>     
  <td>
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode1" -->
  </td>
  <td><input type="text" id="qty" name="qty"></td>
</tr>       
<Tr>
  <td>
    <SELECT NAME=packcode2 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
  </td>
  <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode2" -->
  </td>
  <td>
   <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode2" -->
  </td>     
  <td>
   <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode2" -->
  </td>
  <td><input type="text" id="qty" name="qty"></td>
</tr>       
<Tr>
   <td>
    <SELECT NAME=packcode3 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
   </td>
   <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode3" -->
   </td>
   <td>
    <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode3" -->
   </td>        
   <td>
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode3" -->
   </td>
   <td><input type="text" id="qty" name="qty"></td>
</tr>       
<Tr>
   <td>
    <SELECT NAME=packcode4 style="width:100px;"> 
        <OPTION VALUE=0><?=$optionspackcode?></SELECT> 
   </td>
   <td>
    <!-- show mysql result for "select Category from skudata where packcode=packcode4" -->
   </td>
   <td>
   <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode4" -->
   </td>        
   <td>
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode4" -->
   </td>
   <td><input type="text" id="qty" name="qty"></td>
</tr>       
</table>

Answer 1

您想使用链接到 td 上方框的数据库中的数据填充？

如果是这样，您可以使用 AJAX 是的，并在选择框的选项上放置一个 onclick（很确定应该这样做）。

<select>
    <option onclick="myAjaxFunction(this);">Some name</option>
    <option onclick="myAjaxFunction(this);">Some other name</option>
</select>

然后您必须创建函数 myAjaxFunction，其中将包含您的 Ajax 请求代码 (http://api.jquery.com/jQuery.ajax/)。 简单的例子可能是：

<script>
function myAjaxFunction(elem) {
    $.ajax({
        url: 'target/file.php',
        success: function(response) {
            $("#target-td").html(response);
        }
    });
}
</script>

最后是您使用 AJAX 调用的 .php 文件，其中包含您的数据库调用。在文件中，您只需回显您想要显示的内容。

理想情况下，您将进行一次调用并使用 json 将其全部返回。一个属性

dataType: 'json'

可以添加到 $.ajax() 调用中，你可以使用：

echo json_encode($myContent);

在 PHP 中，你 json 编码你的 php 内容（最好是在一个数组（）中）。

这应该为您指明了方向:) 请告诉我是否需要更具体，或提供更好的示例...

更新

您可以为每个要定位的 td 创建唯一的 ID。然后创建

<td>
    <select>
        <option onclick="firstPackCodeAjax('<?=$packcodeValue?>');" value="<?=$packcodeValue?>"><?=$packcodeValue?></option>
    </select>
</td>
<td id="categoryTd">
   <!-- show mysql result for "select Category from skudata where packcode=packcode1" -->
</td>
<td id="unitsTd">
    <!-- show mysql result for "select SellingUnits from skudata where packcode=packcode1" -->
</td>     
<td id="palletTd">
    <!-- show mysql result for "select FullPalletQTY from skudata where packcode=packcode1" -->
</td>

那么您的 AJAX 函数将是：

<script>
function firstPackCodeAjax(packCode) {
    $.ajax({
        url: 'target/file.php',
        data: {code: packCode},
        dataType: 'json',
        success: function(json) {
            $("#categoryTd").html(json.Category);
            $("#unitsTd").html(json.SellingUnits);
            $("#palletTd").html(json.FullPalletQTY);
        }
    });
}
</script>

这期望数据输出为json，格式为：

[
    { "Category": "Fast cars" },
    { "SellingUnits": "9001" },
    { "FullPalletQTY": "9001" }
];

然后，您将为要使用 AJAX 的每个选择创建一个函数。您需要在某处创建自己的 target/file.php。在这里，您获取数据并在 json 中回显。祝你好运；）另外，这很容易被优化，但那是为了以后......

Answer 2

您可以为此使用 AJAX。我手头没有任何示例，但是关于结合 AJAX 和 PHP 的 w3schools 教程是一个很好的起点。 http://w3schools.com/ajax/ajax_aspphp.asp 我会修改他们的示例，使用与 w3schools 网站上类似的 JavaScript 函数将所有选项标签值直接输出到您的选择标签中。

希望这会有所帮助！