沒有選項，無法選擇。如何在JavaScript中調用數據庫中的數據？

Question

我有包含像下面的代碼元素的表形式：

<table border="1" bordercolor="#7695CC" id="table2"> 
<tr> 
    <td class="tablesubtitle" align="center">No</td> 
    <td class="tablesubtitle" align="center">Name Component</td> 
    <td class="tablesubtitle" align="center">Name child Component</td> 
    <td class="tablesubtitle" align="center"Point</td> 
    <td class="tablesubtitle" align="center">Action</td> 
</tr>     
<tr> 
    <td>1</td> 
    <td><select name="component" onChange="NameComponent(this);"> 
     <option value="#">&nbsp;</option> 
     <?php 
      opendb(); 
      $query = "SELECT * FROM componentone"; 
      $result = mysql_query($query); 
      while($data = mysql_fetch_array($result)){ 
       $ID = $data['ID']; 
       $name = $data['Component']; 
       echo "<option value='$ID'>$name</option>"; 
      } 
     ?> 
    </select> 
</td> 
<td><div id='childcomponent'><select> 
     <option value="#"></option> 
     </select> 
              </div> 
    </td> 
    <td align="center"><a href="result_point.php?menu_id=<?=$menu_id?>">0</a></td> 
    <td align="center"><input type="button" value=" + " onClick="addRowToTable();"> | <input type="button" value=" - " onClick="removeRowFromTable();"></td> 
</tr> 
</table> 

如果看到的onChange功能那裏，該函數是用於調用數據的結果從數據庫中顯示的結果（見div元素）<div id='childcomponent'>選擇組件名稱<select name="component">中的一個選項後。這兩個元素是連接的。

function NameComponent(combobox) 
    { 
     var code = combobox.value; 
     if (!code) return; 
     xmlhttp.open('get', '../template/get_component_name-opr.php?code='+code, true); 
     xmlhttp.onreadystatechange = function() { 
      if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) 
      { 
       document.getElementById("childcomponent").innerHTML = xmlhttp.responseText; 
      } 
      return false; 
     } 
     xmlhttp.send(null); 
    } 

實施例：第1號，組件名我選擇是AAA，這AAA有三個childcomponent，是AAA1 AAA2 AAA3。在我選擇AAA後，三個子組件（AAA1，AAA2和AAA3）將自動顯示。 這是代碼，當我打電話，結果數據顯示給<div id='childcomponent'>：

<?php 
include ("config.php"); 
include ("dbfunctions.php"); 

echo "<script language=\"JavaScript\" src=\"js/form_validation.js\"></script>"; 

echo "<select name='child_component'>"; 
echo "<option value=\"\">&nbsp;</option>"; 
opendb(); 
$query = "SELECT * FROM childcomponent WHERE ID='$_GET[code]' "; 
$result = querydb($query); 
while ($data = mysql_fetch_array($result)) 
    { 
     echo "<option value='".$data['ID']."'>".$data['childcomponent_name']."</option>"; 
    } 
echo "</select>"; 
?> 

在操作，我想添加行和刪除行。 這是通過使用Javascript功能來添加行的代碼：

<script language="Javascript"> 
function addRowToTable() 
{ 
    var tbl = document.getElementById('table2'); 
    var lastRow = tbl.rows.length; 
    var iteration = lastRow; 
    var row = tbl.insertRow(lastRow); 

    // left cell 
    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration); 
    cellLeft.appendChild(textNode); 

    // right cell 
    var cellRightSel1 = row.insertCell(1); 
    var sel = document.createElement('select'); 
    sel.name = 'component' + iteration; 
    cellRightSel1.appendChild(sel); 

    // select cell 
    var cellRightSel2 = row.insertCell(2); 
    var sel = document.createElement('select'); 
    sel.id = 'childcomponent' + iteration; 
    sel.options[0] = new Option('',''); 
    sel.options[1] = new Option('', ''); 
    cellRightSel2.appendChild(sel); 

    var cellRight = row.insertCell(3); 
    var el = document.createElement('input'); 

    cellRight.appendChild(el); 

} 
<script> 

我在這裏的問題是，當我添加一行，兩數有根本沒有選擇，我可以在組件名稱選擇。 問題是，如何在JavaScript中調用數據庫中的數據？ 從這裏調用數據庫，也許？

var cellRightSel2 = row.insertCell(2); 
    var sel = document.createElement('select'); 
    sel.id = 'childcomponent' + iteration; 
    **sel.options[0] = new Option('',''); 
    sel.options[1] = new Option('', '');** 
    cellRightSel2.appendChild(sel); 

在此先感謝。

Answer 1

這裏有幾個選項：

1. 使用你有NameComponent同樣的想法：當用戶點擊添加行按鈕，你做一個Ajax調用服務器，並有與HTML PHP迴應你想要在新行中顯示。然後用innerHTML插入HTML。
2. 將添加行按鈕更改爲提交按鈕。然後讓PHP使用額外的行生成更新的頁面。

Answer 2

好的，既然您聲明您希望瞭解該問題，我花了一些時間來更詳細地分析您的代碼。首先，要回答你的問題，沒有辦法從javascript調用數據庫。你可以做的是向服務器發起ajax請求，並使用響應，就像你在你的NameComponent函數中做的那樣，就像@WayneBaylor所建議的那樣。

現在，您的代碼還有很多其他問題。下面是一些我認爲是最嚴重的：

1. 當你編程方式創建一個新行addRowToTable，它應該是一樣的，你用PHP創建默認行。您的代碼會創建一個類似的但不同的行，它缺少第一個組件上的「更改」事件，而div包含子組件（它直接位於<td>內）。 addRowToTable也通過添加具有4列而不是預期的5行的行來破壞您的HTML表格（並且第4個單元格上的輸入不做任何操作並且沒有標籤）。

2. addRowToTable也有一個問題編號邏輯（他們的方式你設置iteration至tbl.rows.length）。想象一下，你從一行開始，並添加三個。然後你刪除第二行，並添加一個到最後。第三行和第四行將被編號爲「4」，更糟糕的是，您將有兩個元素，其編號爲childcomponent4，這是無效的。

3. 您的「更改」處理程序NameComponent將不得不重新工作。你不能做document.getElementById("childcomponent")，因爲那樣你總是將內容設置爲第一行的div，而不是更改後的<select>所屬的行。您將在同一行中查找一個childcomponent容器div（您當前的代碼不會創建它）。

4. 正如@MarcB指出的那樣，您的PHP代碼中有一個SQL注入漏洞。在確定$_GET[code]包含數字之前，您不應該使用SELECT * FROM childcomponent WHERE ID='$_GET[code]'。否則，你的數據庫將很容易受到攻擊。順便說一下，如果它確實是一個數字，並且數據庫上的ID列是一個整數，那麼您也不需要$_GET['code']之間的單引號（但請注意，您需要在$_GET['code']的code左右單引號，沒有）。

我建議你學習和使用jQuery，因爲它會讓事情變得更簡單。例如，在addRowToTable上，使用普通的js DOM操作方法從表中克隆一個樣本行非常容易，而不是從零開始創建新行。你可能意識到他們是一個痛苦的使用...

我希望這可以幫助你把你的代碼放在正確的軌道上。