php - JavaScript 中的 MySQL 查询

Question

我正在处理一个表单，其中使用 JavaScript 添加另一个行项目。目的是将行项目添加到发票中。在我的表单中使用文本框时，我已经成功地让它工作正常，但我仍然坚持如何让它与下拉框一起工作，该下拉框调用 mysql 以获取下拉框数据。

这是我的。

 <?php
     include $_SERVER['DOCUMENT_ROOT']."/connect.php";
     include $_SERVER['DOCUMENT_ROOT']."/includes/header.php";
 ?>

 <script type="text/javascript">
     var counter = 1;
     function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><select name='myInputs[]'><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>";
          document.getElementById(divName).appendChild(newdiv);
     }
 </script>

 <form method="POST">
     <div id="dynamicInput">
          Entry 1<br><select name="myInputs[]"><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>
     </div>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
 </form>

所以这里有一些关于正在发生的事情的信息。现在，上面的 JavaScript 代码显示了其中的 MySQL 查询。这会终止添加行项目功能。如果我简单地删除查询但保留其他 php，添加行项目将再次开始工作，但当然下拉列表中没有数据。

在表单本身中，它在不使用 javascript 的情况下从数据库中获取第一行项目，并且工作正常。

我觉得我越来越近了，但不知道从这里到哪里去。

提前致谢。

编辑:感谢尼克，我得到了这个工作。这是代码。

 <?php
 include $_SERVER['DOCUMENT_ROOT']."/connect.php";
 include $_SERVER['DOCUMENT_ROOT']."/includes/header.php";
 ?>

 <script type="text/javascript">
 var counter = 1;
 function addInput(div){
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Entry " + (++counter) + " <br><select name='myInputs[]'>" + xmlhttp.responseText + "</select>";
     }
      document.getElementById(div).appendChild(newdiv);
   }

 xmlhttp.open("GET", "update_text.php", false);
 xmlhttp.send();
 }
 </script>

 <form method="POST">
 <div id="dynamicInput">
      Entry 1<br><select name="myInputs[]"><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>
 </div>
 <input type="button" value="Add" onClick="addInput('dynamicInput');">
 </form>

然后是update_text.php

 <?php
 include $_SERVER['DOCUMENT_ROOT']."/connect.php";
 $result = mysql_query("SELECT * FROM salesitem");
 while($row = mysql_fetch_array($result)) {
 echo "<option value=\"".$row['name']."\">".$row['name']."</option>";
 }
 ?>

这是我在数据库中发布的 php 帖子，它不适用于 javascript 添加行项目，仅适用于从表单创建的原始条目。 (除了下拉菜单，我还有其他字段)。

 <?php

 include $_SERVER['DOCUMENT_ROOT']."/connect.php";

 $company = mysql_real_escape_string($_POST['company']);

 foreach($_POST['item'] as $i => $item)
 {
   $item = mysql_real_escape_string($item);
 $quantity = mysql_real_escape_string($_POST['quantity'][$i]);

 mysql_query("INSERT INTO invoice (company, item, quantity) VALUES ('$company', '".$item."', '".$quantity."') ") or die(mysql_error());
 }
 echo "<br><font color=\"green\"><b>Invoice added</b></font>";

 ?>

谢谢，如果我可以更好地清理它，请告诉我。

Answer 1

遗憾的是，由于 PHP 的性质，您尝试执行此操作的方式无法正常工作。

当客户端从服务器请求您的页面时，所有 php 都会被执行。

所以你的 javascript 函数中的 php block 实际上只是你的 php 的静态结果。

您需要使用 XMLHttpRequests/Ajax 从服务器请求新数据。

这是一个简单的(可能相当糟糕的)示例!

修改您的 javascript 函数:

var counter = 1;
function addInput(div) {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var d = document.getElementById(div);
                    d.innerHTML=d.innerHTML  +"<div>Entry " + (++counter) + " <br><select name='myInputs[]'>" + xmlhttp.responseText + "</select></div>";
        }
    }
    xmlhttp.open("GET", "updated_list.php", false);
    xmlhttp.send();
}

服务器上的新 php 文件:(updated_list.php)

<?php 
// you'll need to include stuff to connect to your database here
$result = mysql_query("SELECT * FROM salesitem"); 
while($row = mysql_fetch_array($result)) { 
    echo "<option value=\"".$row['name']."\">".$row['name']."</option>";
} 
?>

更新

我确实说过这是一个糟糕的例子 :) 我的原始代码覆盖了你的 div 的内容而不是添加到它，我已经更新了它。这只是一个示例，您应该阅读 AJAX 以及如何从服务器请求数据。