JavaScript 中的 MySQL 查询

Posted 2023-02-15

【中文标题】JavaScript 中的 MySQL 查询

【英文标题】：MySQL Query Within JavaScript

【发布时间】：2013-03-14 08:47:52

【问题描述】：

我正在制作一个表单，使用 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>";

 ?>

谢谢，如果我能更好地清理这个，请告诉我。

【问题讨论】：

您可能希望将您的entry 1 部分包装在<div> 中，以便它与插入行的标记相匹配。或者可能将id 放在按钮上并使用insertBefore（insertAfter 在您的dynamicInput 上会导致将新按钮添加到顶部而不是底部）

是的，我的 javascript 添加行没有插入到数据库中。当您说将我的条目 1 部分包装在一个 div 中时，它还没有吗？你能澄清一下吗？

是的，但是您将newdiv 插入到您的第一个而不是之后。你目前拥有的<form><div1>entry1<br><select><div2>....</div2><div1></form> 我认为你想要的<form><div1>entry1<br><select></div1><div2>....</div2></form>。如果您的问题已得到解答，您应该接受其中之一:-)

似乎没有什么区别，只有第一行被写入数据库。我正在将我的 php 帖子添加到原始帖子中，看看是否可能存在问题。

我已经确定 javascript 没有发布到 php。但我不确定如何修复 html 表单。您已经明确表示我应该在 javascript 中添加一个 div 标记，但是我不确定要命名它以使其与 html 表单一起使用。

【参考方案1】：

很遗憾，由于 PHP 的性质，您尝试执行此操作的方式行不通。

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

所以你的 javascript 函数中的 php 块实际上只是你的 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 以及如何从服务器请求数据。

【讨论】：

尼克，它没有添加具有这些更改的行项目，按下添加按钮时没有任何反应。手动运行时，updated_list.php 正在工作。我删除了 if 以查看它是否有任何影响，但没有。谢谢。

我有一个错字。当我点击 Add 按钮时，它跳了 2。我把它改回 counter + 1。但是，它停在 #2 并且不会再继续了。仍然没有mysql数据。我将继续工作并尝试将我的原始代码与您的代码合并，看看我是否可以让它工作。感谢您的帮助。

我搞定了。我将在我的原始帖子中发布一个附录。谢谢！

【参考方案2】：

这是AJAX（异步Javascript和XML）的一个经典例子——基本概念是当一个动作被执行时（例如点击一个按钮来显示内容），一些JavaScript调用一个PHP （异步），PHP 运行，返回一个 XML 文件（虽然这实际上可以是您想要的任何文件格式，现在有些人更喜欢使用 JSON，因为它更容易解析），以及此 XML/JSON 也使用 JavaScript 显示。

虽然上面的例子是显示内容，但没有理由不能异步执行您需要在服务器上运行的任何操作（例如，将数据插入数据库）。

SO 不是为人们编写代码的地方 - 所以现在我已经给了你一个关于从哪里开始的提示，作为读者的练习（/问题提问者！），看看一些AJAX 教程，确保你理解了这个概念，写了一些代码，如果仍然不能让它工作，请回来！

祝你好运:)

【参考方案3】：

页面加载后，您不能在 javascript 函数中使用服务器代码。 服务器端代码就像它的名字一样——在服务器上运行的代码。因此，在页面完成加载后，它“返回”到客户端，现在只有客户端代码（javascript）可以运行。 所以你的线

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>";

有点错误。

您可以做的是将数据库中的数据返回到 javascript（使用 json 将是最佳选择），然后使用来自服务器的原始数据（现在是 javascript 数据）动态构建选择框。

假设您的数据是

var data = [name:'n1',name:'n2',name:'n3'];

您可以使用 javascript 运行此数据并构建您的组合：

var newSelect = document.createElement('select');
for(var i=0;i<data.length;i++)
  var name = data[i].name;
  newSelect.options[newSelect.options.length] = new Option(name,name);