Нет вариантов и не может выбрать.Как вызвать данные из базы данных в 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 имеет три дочерних компонента, 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

Хорошо, поскольку вы заявляете, что хотите понять проблему, я потратил некоторое время на более подробный анализ вашего кода. Прежде всего, чтобы ответить на ваш вопрос, нет способа «вызвать базу данных» из javascript. Что вы можете сделать, это запустить ajax-запрос к серверу и использовать ответ, как вы делали в своей функции NameComponent, как предлагает @WayneBaylor.

Теперь у вашего кода много других проблем. Вот те, которые я считаю наиболее серьезными:

1. Когда вы создаете новую строку программно с помощью addRowToTable, она должна совпадать с строкой по умолчанию, которую вы создаете с помощью PHP. В вашем коде создается похожая, но другая строка, в которой отсутствует событие «change» в первом компоненте и элемент div, содержащий дочерний компонент (он находится непосредственно внутри <td>). addRowToTable также разбивает вашу таблицу HTML, добавляя строки с 4 столбцами вместо ожидаемых 5 (и ввод в 4-ю ячейку ничего не делает и не имеет метки).

2. addRowToTable также имеет проблематичную логику нумерации (они устанавливают iteration на tbl.rows.length). Представьте, что вы начинаете с одного ряда и добавляете еще три. Затем вы удаляете второй ряд и добавляете еще один в конец. Третья и четвертая строки будут затем пронумерованы как «4», и что еще хуже: у вас будет два элемента с идентификатором childcomponent4, который недопустим.

3. Ваш обработчик "изменения" NameComponent должен быть переработан. Вы не можете сделать document.getElementById("childcomponent"), потому что тогда вы всегда будете устанавливать содержимое в div в первой строке, а не в строку, к которой принадлежит измененный <select>. Вы будете искать дочерний контейнерный элемент div в той же строке (который ваш текущий код не создает).

4. Как отметил @MarcB, у вас есть дыра для SQL-инъекции в вашем PHP-коде. Вы не должны делать SELECT * FROM childcomponent WHERE ID='$_GET[code]', прежде чем убедитесь, что $_GET[code] содержит число. В противном случае ваша база данных будет очень уязвимой для атак. Кстати, если это действительно число, а ваш столбец идентификаторов в БД является целым числом, вам также не нужны одинарные кавычки между $_GET['code'] (но учтите, что вам нужны одинарные кавычки около code в $_GET['code'] , которого у вас сейчас нет).

Я предложил вам изучить и использовать jQuery, потому что это действительно упростит вам задачу. Например, в addRowToTable было бы очень просто просто клонировать строку образца из таблицы вместо создания новой строки с нуля, используя простые методы манипулирования DOM js. Вы, наверное, поняли, что это боль - использовать ...

Надеюсь, это поможет вам правильно поставить код.

Answer 2

Вот несколько вариантов:

1. Используйте ту же идею, что и для NameComponent: когда пользователь нажимает кнопку «Добавить строку», вы делаете Ajax-вызов на сервер и получаете ответ PHP с HTML, который вы хотите отобразить в новой строке. Затем вставьте HTML с помощью innerHTML.
2. Измените кнопку Добавить строку на кнопку отправки. Затем пусть PHP сгенерирует обновленную страницу с дополнительной строкой.