Javascript 如何通过按钮将插入数据与网页上的现有数据成员一起传输到数据库中？ 背景
我有一个数据库，它有一个名为menuitems的表。menuitems存储ResterCount菜单的属性。列包括“项目编号、名称、价格、折扣、类别” 菜单项通过sql显示在menu.php页面中。你有两个选择。您可以单击食品类别或饮料类别 例如，单击食品类别时。它将在“项目”和“单价”列下显示“名称”和“价格” 现在这个网页是别人做的。我的工作是尝试找出一种方法来获取此订单的数量，并将订单插入到“orderdb”表中 “orderdb”表包含orderid（自动增量）、itemno、qty、idtable和小计。小计的计算方法是将itemno和quantity相乘Javascript 如何通过按钮将插入数据与网页上的现有数据成员一起传输到数据库中？ 背景,javascript,php,html,mysql,phpmyadmin,Javascript,Php,Html,Mysql,Phpmyadmin,我有一个数据库，它有一个名为menuitems的表。menuitems存储ResterCount菜单的属性。列包括“项目编号、名称、价格、折扣、类别” 菜单项通过sql显示在menu.php页面中。你有两个选择。您可以单击食品类别或饮料类别 例如，单击食品类别时。它将在“项目”和“单价”列下显示“名称”和“价格” 现在这个网页是别人做的。我的工作是尝试找出一种方法来获取此订单的数量，并将订单插入到“orderdb”表中 “orderdb”表包含orderid（自动增量）、itemno、qty、i
这是代码 我现在所做的是在menu.php页面上创建一个文本字段，用户可以在其中输入数量，我还创建了一个按钮，上面写着“+”表示将订单添加到orderdb表中 但我不知道还能做什么。我知道如何用简单的SQL语言和它的术语来执行，但是我的PHP非常弱 这是我的代码正常运行了
<!DOCTYPE html>
<html>
<title>Menu List</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#foodDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
height:400px;
width:500px;
display: none;
}
#bevDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: pink;
height:400px;
width:500px;
display:none;
}
#menuNav {
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.menuNav button {
background-color: inherit;
float: left;
border: none;
outline: none;
padding: 14px 16px;
font-weight:bold;
font-size: 18px;
}
/* Change background color of buttons on hover */
.menuNav button:hover {
background-color: #ddd;
}
th {
padding-top: 12px;
padding-bottom: 12px;
width:150px;
color: white;
}
</style>
</head>
<body>
<div class="menuNav">
<button onclick="categorize('food')">Food</button>
<button onclick="categorize('beverage')">Beverage</button>
</div>
<div id="foodDIV">
<table>
<tr>
<th>Items</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Add item</th>
<th> Remove Item</th>
</tr>
<?php
$conn=mysqli_connect("localhost","root","","tabletable");
if($conn->connect_error){
die("Connection failed:".$conn->connect_error);
}
$sql= "SELECT name,price from menuitems where category='Food'";
$result =$conn ->query($sql);
if($result-> num_rows>0){
while($row=$result->fetch_assoc()){
echo "<tr><td>".$row["name"]."</td><td>".$row["price"]."</td><td><input type='number' name='fquantity'></td><td><input type='button' value='+'></td><td><input type='button' value='-'></td></tr>";
}
echo"</table>";
}
else{
echo "0 result ";
}
$conn->close();
?>
</table>
</div>
<div id="bevDIV2">
<table>
<tr>
<th>Items</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Add item</th>
<th>Remove item</th>
</tr>
<?php
$conn=mysqli_connect("localhost","root","","tabletable");
if($conn->connect_error){
die("Connection failed:".$conn->connect_error);
}
$sql= "SELECT name,price from menuitems where category='Beverage'";
$result =$conn ->query($sql);
if($result-> num_rows>0){
while($row=$result->fetch_assoc()){
echo "<tr><td>".$row["name"]."</td><td>".$row["price"]."</td><td><input type='number' name='bquantity'></td><td><input type='button' value='+'></td><td><input type='button' value='-'></td></tr>";
}
echo"</table>";
}
else{
echo "0 result ";
}
$conn->close();
?>
</table>
</div>
<script>
function categorize(ctg) {
if(ctg=='food'){
var x = document.getElementById("foodDIV");
var y=document.getElementById("bevDIV2");
if (x.style.display !== "block"){
x.style.display = "block";
}
if (y.style.display !== "none"){
y.style.display = "none";
}
}
else if(ctg=='beverage'){
var x = document.getElementById("bevDIV2");
var y=document.getElementById("foodDIV");
if (x.style.display !== "block"){
x.style.display = "block";
}
if (y.style.display !== "none"){
y.style.display = "none";
}
}
}
</script>
</body>
</html>
菜单列表
#食客{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
高度：400px；
宽度：500px；
显示：无；
}
#贝夫迪夫2{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：粉红色；
高度：400px；
宽度：500px；
显示：无；
}
#梅努瓦{
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.Menuna按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
填充：14px 16px；
字体大小：粗体；
字号：18px；
}
/*更改悬停按钮的背景色*/
.Menuna按钮：悬停{
背景色：#ddd；
}
th{
填充顶部：12px；
垫底：12px；
宽度：150px；
颜色：白色；
}
食物
饮料
项目
单价
数量
添加项
删除项目
您向我们展示了一个php程序，用于读取数据库表、构建HTML页面并将其发送到浏览器。php程序生成的HTML包含一些Javascript代码来处理一些用户界面操作
HTML页面及其包含的Javascript在用户的浏览器中运行，而不是在php服务器上运行。您的程序中根本没有允许浏览器让php程序在您的服务器上执行任何操作的内容
您的MySQL数据库只能从您的服务器上获得。驻留在浏览器中的Javascript程序本身尝试插入或更新某些数据库行是毫无意义的
一般来说，当用户在浏览器中单击某个内容时，初学者运行php程序的方法是使用HTML表单，并使单击提交表单。表单被提交到您的php程序，该程序执行插入或其他操作，并将HTML页面的新副本发送回浏览器
一旦您完全熟悉这种形式的POST工作流，您可以考虑在网页中添加或请求JavaScript。AJAX和Fetch可以将数据从网页的Javascript发送到php服务器，而无需刷新HTML页面
恕我直言，我建议您在继续这个项目之前，先学习一两个php/forms教程？有很多你需要的知识和你没有的知识。有用的建议：如果读者需要你提供的数据库数据来回答问题，应该深入问题本身。然而，我想知道对于堆栈溢出来说，这个问题是否过于宽泛，读者最好在评论中给出建议。是的，我对这个平台总体上不太熟悉。我知道人们可以提供帮助，所以我在这里发布。我猜您需要一个AJAX操作，这是一段JavaScript，它将数据透明地发送到PHP脚本，然后PHP脚本将数据写入数据库并返回一些结果（例如，写入成功）。如果这听起来很适合您的用例，我建议您在web上搜索“PHP AJAX”并进行一些研究——这里有很多示例，我们不需要在这里再次键入它；-）。顺便说一句，您可能还没有读过-在堆栈溢出时，发布指南是相当不同的，这就是为什么每个人都想来这里。需要注意的主要一点是，不符合张贴准则的问题可以通过民主投票的过程来解决。我认为这个问题符合太宽泛的标准。好吧，兄弟，那么我将在google上检查PHP AJAX。但是有什么特别的吗？你明白我在这里要做什么吗@halferOh它应该在本地运行。使用localhost。就像，这是你可以说的要求的一部分。基于项目的。您必须导入数据库。如果刷新页面不是问题，那么我还需要AJAX吗？你能指导我进一步了解你现在掌握的关于我的案例的信息吗？“本地”可能并不意味着你认为它意味着什么。Javascript在浏览器中运行，因此这是一种本地语言。php在服务器中运行，而服务器恰好位于本地主机上，即本地计算机上。它们不是一回事。即使数据库是