无法保存使用 html 和 javascript 创建的购物车数据答案

【问题标题】：Not able to save data of shopping cart created using html and javascript无法保存使用 html 和 javascript 创建的购物车数据
【发布时间】：2022-11-30 00:57:35
【问题描述】：

使用 html 类创建购物车并使用 javascript 向它们添加功能，现在我想将购物车详细信息（如产品名称、价格、总计）保存到 phpmysql 数据库我已经用 php 编写了用于连接我的购物车和数据库的代码，但它不起作用

--html 页面

<html>
<head>
<title>Fruits & Vegetables</title>
<link rel="stylesheet"type="text/css"href="FVc.css">
</head>
<body>
<Style>body {background-image: url('image1.jpg');background-repeat: no-repeat;backgroung-attachment:fixed;background-size:cover;}</style><div class="container">
  <div class="screen-togo">
    <h2>To Go Menu</h2>
    <ul class="menu-items">
      <!--    Menu Item 1    -->
      <li class="menu-item">
        <img src="potato.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">potato</p>
          <p class="g-price">RS 30</p>
        </div>
 <button
          class="add-button"
          data-title="potato"
          data-price="30">Add to Cart</button>
        
      </li>
      <!--    Menu Item 2    -->
      <li class="menu-item">
        <img src="onion.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">onion</p>
          <p class="g-price">RS 40</p>
        </div>
        <button
          class="add-button"
          data-title="onion"
          data-price="40">Add to Cart</button>
      </li>
      <!--    Menu Item 3    -->
      <li class="menu-item">
        <img src="capsicum.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">capsicum</p>
          <p class="g-price">RS 20</p>
        </div>
        <button
          class="add-button"
          data-title="capsicum"
          data-price="20">Add to Cart</button>
      </li>
      <!--    Menu Item 4    -->
      <li class="menu-item">
        <img src="brinjal.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">brinjal</p>
          <p class="g-price">RS 15</p>
        </div>
        <button 
          class="add-button"
          data-title="brinjal"
          data-price="15"
          >Add to Cart</button>
      </li>
      <!--    Menu Item 5    -->
      <li class="menu-item">
        <img src="tomato.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">tomato</p>
          <p class="g-price">RS 50</p>
        </div>
        <button
          class="add-button"
          data-title="tomato"
          data-price="50">Add to Cart</button>
      </li>
    

      <!--    Menu Item 6    -->
      <li class="menu-item">
        <img src="apple.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">apple</p>
          <p class="g-price">RS 200</p>
        </div>
        <button
          class="add-button"
          data-title="apple"
          data-price="200">Add to Cart</button>
      </li>
  
  
<!--    Menu Item 7    -->
      <li class="menu-item">
        <img src="banana.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">banana</p>
          <p class="g-price">RS 120</p>
        </div>
        <button
          class="add-button"
          data-title="banana"
          data-price="120">Add to Cart</button>
      </li>
    
<!--    Menu Item 8    -->
      <li class="menu-item">
        <img src="pomegrenate.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">pomegrenate</p>
          <p class="g-price">RS 300</p>
        </div>
        <button
          class="add-button"
          data-title="pomegrenate"
          data-price="300">Add to Cart</button>
      </li>
    
<!--    Menu Item 9   -->
      <li class="menu-item">
        <img src="guava.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">guava</p>
          <p class="g-price">RS 80</p>
        </div>
        <button
          class="add-button"
          data-title="guava"
          data-price=" 80">Add to Cart</button>
      </li>
    
<!--    Menu Item 10   -->
      <li class="menu-item">
        <img src="mango.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">mango</p>
          <p class="g-price">RS 60</p>
        </div>
        <button
          class="add-button"
          data-title="mango"
          data-price="60">Add to Cart</button>
      </li>
    

<!--    Menu Item 11   -->
      <li class="menu-item">
        <img src="grapes.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">grapes</p>
          <p class="g-price">RS 40</p>
        </div>
        <button
          class="add-button"
          data-title="grapes"
          data-price="40">Add to Cart</button>
      </li>
    
<!--    Menu Item 12   -->
      <li class="menu-item">
        <img src="papapya.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">papapya</p>
          <p class="g-price">RS 55</p>
        </div>
        <button
          class="add-button"
          data-title="papapya"
          data-price="55">Add to Cart</button>
      </li>
    
  </div>
  <div class="screen-cart">
    <h2>Your Cart</h2>
    <!--  Cart Items -->

    <ul class="cart-items">
    </ul>
  
    <div class="cart-math">
      <p>Add items to cart</p>

    </div>



 <b><a href = "consumer_dashboard.php" target = "_self">Back</a></b>
<button style="background-color:#87CEFA" align =right><a href = "Fvconnect.php?id=F">OrderNow</a></button>

  </div>
</div> 

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>
<script src="Fruits.js"></script>

</body>
</html>

--css 代码

body {
  background-image: url('../img/background.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
}

h2, .g-price {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 50px;
}

.g-price {
  margin: 8px 0;
}

.container {
  width: 90%;
  max-width: 780px;
  margin: 0 auto;
  padding: 70px 0;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 950px) {
  .container {
    display: block;
  }
}
.screen-togo, .screen-cart {
  width: 375px;
  max-height: 750px;
  overflow: scroll;
  border-radius: 25px;
  background: white;
  padding-top: 30px;
  padding-left: 30px;
  margin: 20px;
  box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.1);
}

ul {
  padding: 0;
  list-style: none;
}

.menu-item {
  background: #E4F0FD;
  border-radius: 20px 0 0 20px;
  margin: 30px 0;
  padding-top: 15px;
  padding-right: 30px;
  padding-bottom: 10px;
  position: relative;
}
.menu-item:nth-child(2n) {
  background: #FBE4F0;
}
.menu-item:nth-child(3n) {
  background: #F7F7FE;
}
.menu-item:nth-child(4n) {
  background: #E4FDF1;
}
.menu-item img {
  width: 150px;
  position: absolute;
  top: -20px;
  left: -20px;
}
.menu-item .add-button {
  position: absolute;
  border: none;
  background: #6B00F5;
  padding: 6px 20px 4px;
  border-radius: 20px;
  color: white;
  font-weight: 700;
  font-size: 16px;
  bottom: -10px;
  left: 150px;
  transition: all 0.3s;
}
.menu-item .add-button:hover {
  background: #5815AE;
}

.menu-item-dets {
  margin-left: 150px;
  padding-bottom: 15px;
}

.menu-item-heading {
  font-size: 18px;
  margin: 10px 0 12px;
}

.screen-cart {
  padding-right: 30px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(10px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.cart-item {
  display: flex;
  align-items: flex-start;
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #D7D7F9;
  animation: fadeIn 0.3s;
}
.cart-item:last-child {
  border-bottom: 5px solid #D7D7F9;
}
.cart-item img {
  width: 30px;
}
.cart-item .g-price {
  font-size: 24px;
}

.cart-item-dets {
  margin-left: 15px;
  width: 100%;
}

.cart-item-heading {
  margin: 10px 0;
}

.cart-math-item {
  margin: 5px 0;
  font-weight: 700;
}
.cart-math-item span {
  display: inline-block;
  text-align: right;
}
.cart-math-item .cart-math-header {
  width: 50%;
}
.cart-math-item .g-price {
  width: 40%;
}

--javascript代码

let subtotal = 0;


const calculateTax = subtotal => {
  const tax = subtotal * 0.13;
  const formattedTax = tax.toFixed(2);
  return formattedTax;
};

const calculateTotal = subtotal => {
  const tax = calculateTax(subtotal);
  const total = parseFloat(subtotal) + parseFloat(tax);
  const formattedTotal = total.toFixed(2);
  return formattedTotal;
};

const getImgLink = title => {
  let imgLink;
  switch (title) {
    case 'potato':
      imgLink = 'potato.jpg';
      break;
    case 'onion':
      imgLink = 'onion.jpg';
      break;
    case 'capsicum':
      imgLink = 'capsicum.jpg';
      break;
    case 'brinjal':
      imgLink = 'brinjal.jpg';
      break;
    case 'tomato':
      imgLink = 'tomato.jpg';
      break;
case 'apple':
      imgLink = 'apple.jpg';
      break;
case 'banana':
      imgLink = 'banana.jpg';
      break;
case 'mango':
      imgLink = 'mango.jpg';
      break;
case 'pomegrenate':
      imgLink = 'pomegrenate.jpg';
      break;
case 'guava':
      imgLink = 'guava.jpg';
      break;
case 'grapes':
      imgLink = 'grapes.jpg';
      break;
case 'papapya':
      imgLink = 'papapya.jpg';
      break;
    default:
      imgLink = 'potato.jpg';}

  return imgLink;
};
$('.add-button').on('click', function () {
  const title = $(this).data('title');
  const price = $(this).data('price');
  const imgLink = getImgLink(title);
 
  const element = `
    <li name=cart class="cart-item">
      <img src="${imgLink}" alt="${title}">
      <div class="cart-item-dets">
        <p class="cart-item-heading">${title}</p>
        <p class="g-price">Rs${price}</p>
      </div>
    </li>
  `;
  $('.cart-items').append(element);


  subtotal = subtotal + price;

  const formattedSubtotal = subtotal.toFixed(2);
  const tax = calculateTax(subtotal);
  const total = calculateTotal(subtotal);

  $('.cart-math').html(`
    <p class="cart-math-item">
      <span class="cart-math-header">Subtotal:</span>
      <span class="g-price subtotal">${formattedSubtotal}</span>
    </p>
    <p class="cart-math-item">
      <span class="cart-math-header">Tax:</span>
      <span class="g-price tax">${tax}</span>
    </p>
    <p class="cart-math-item">
      <span class="cart-math-header">Total:</span>
      <span class="g-price total">Rs${total}</span>
    </p>
  `); 
});

--php 代码

<?php
session_start();

$host="localhost";
  $user="root";
  $password="abc";
  $db_name="gsd";

   $con = mysqli_connect($host, $user, $password, $db_name);

$LoginId=$_SESSION['id'];
$Category=$_GET['id'];
$TotalAmt = "10";
$NoItem = "2";

echo $LoginId;
echo $Category; 

if($_POST['OrderNow'])
{
echo "T";
echo $s="insert into MyOrder(LoginId,Category,TotalAmt,NoItem)values('$LoginId','$Category','$TotalAmt','$NoItem')";
echo"Order Placed Successfull";
header('Refresh:50; URL=http://localhost/consumer_dashboard.php');

 if (mysqli_query($con,$s)){
echo"data inserted";
}
else{
echo"error";}

}
?>

【问题讨论】：

“不工作”不是错误消息或有用的问题陈述。我们无法修复代码中的“不工作”，就像机械师无法在没有关于问题的任何其他信息的情况下修理“不工作”的汽车一样。它怎么不工作？ debugging 你做了什么？当你运行这个时到底发生了什么？你期望发生什么？请提供错误消息、意外行为等的详细信息。另请参阅What do you mean "It doesn't work"?
附言由于您是 StackOverflow 的新手（欢迎！），我建议您使用tour，这是您在注册 StackOverflow 时被推荐的（但我从您的个人资料中可以看出您没有）并阅读@987654324 @指南，和What topics can I ask about here?。这样你就会更好地了解一个好问题是什么样的，然后你可以edit你的问题来提高它的质量，从而提高你得到答案的机会。这些资源是为了帮助您在 StackOverflow 上获得良好的体验，所以请使用它们。谢谢。
还有，一大堆 CSS 是否与这个问题相关是多么令人怀疑。请仅提供问题的 minimal reproducible example - 即证明问题所需的最小代码，而不仅仅是整个代码库的未经过滤的转储。这将使我们（和您）更容易快速找到问题的根源。
警告：您的代码容易受到 SQL 注入攻击。您应该使用参数化查询和准备好的语句来帮助防止攻击者通过使用恶意输入值来破坏您的数据库。 bobby-tables.com 给出了风险的解释，以及一些如何使用 PHP / mysqli 安全地编写查询的示例。绝不将未经处理的数据直接插入到您的 SQL 中。按照您现在编写代码的方式，有人可以轻松窃取、错误更改甚至删除您的数据。
phpdelusions.net/mysqli 还包含使用 mysqli 编写安全 SQL 的良好示例。另见 mysqli documentation 和这个：How can I prevent SQL injection in PHP? 。参数化您的查询还将大大降低由于未转义或错误引用的输入值而导致意外语法错误的风险。如果您从教程或书籍中学到了当前的技术，请不要再次使用它。

标签： javascript php html mysql

【解决方案1】：

~~您需要 HTML 中的 FORM 元素才能将数据发布到服务器~~.

~~然后需要在表单上输入一个元素来存储购物车数据~~.

使用 AJAX 请求将购物车数据发送到服务器。

您需要在 JS 和 PHP 中对数据进行一些 JSON 编码/解码。

应该足以让你开始。

【讨论】：

如果你使用 ajax，那么不，你不需要表单元素或任何 unput 元素，因为 js 会负责将数据发送到服务器。您可以使用带有 ajax 的表单和表单输入元素，但您不必这样做。
是的，这是真的。您只需在页面上添加一个提交按钮，而不是 ajax。