桔梗桔梗. 2023-03-18 19:45 采纳率: 37.5%
浏览 17
已结题

普如何通过button将datalist中的label值传到数据库表，可以嘛？

我用datalist获取到商品价格信息等，但是如何通过button再将点击到的商品信息再传到数据库表中呢

  • 写回答

3条回答 默认 最新

  • MarkHan_ 2023-03-18 20:21
    关注

    该回答引用GPTᴼᴾᴱᴺᴬᴵ
    如果您想将datalist中的值传递到后端并将其保存到数据库表中，您需要使用一个后端框架来处理请求。在这个框架中，您需要创建一个接口，该接口将接收从前端发送的商品信息并将其保存到数据库中。

    在前端部分，您需要编写JavaScript代码来获取datalist中的值，并将其发送到后端。您可以使用Ajax或fetch方法将数据发送到后端，然后在后端中处理这些请求并将数据保存到数据库表中。

    下面是一个简单的示例代码，以帮助您开始处理这个问题。

    前端代码:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <input list="items" id="itemInput">
  <datalist id="items">
    <option value="Item 1">10</option>
    <option value="Item 2">20</option>
    <option value="Item 3">30</option>
  </datalist>
  <button onclick="saveItem()">Save</button>

  <script>
    function saveItem() {
      const input = document.getElementById('itemInput');
      const value = input.value.split(" ")[0];
      const data = { item: value };

      fetch('/saveitem', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
    }
  </script>
</body>
</html>

    在上面的代码中，我们有一个输入框和一个datalist，其中包含商品的名称和价格。当用户从datalist中选择一个商品并单击保存按钮时，我们将使用JavaScript代码来提取商品名称，并将其作为JSON数据发送到后端。

    在后端部分，您需要创建一个接口来处理这个请求，并将数据保存到数据库表中。在这个示例中，我们将使用Node.js和Express框架来实现这个接口。您可以根据自己的喜好使用任何其他后端框架。

    后端代码:

    const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

app.post('/saveitem', (req, res) => {
  const item = req.body.item;

  // 将数据保存到数据库表中

  res.json({ message: 'Item saved successfully!' });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

    在上面的代码中，我们创建了一个名为“saveitem”的接口，并在该接口中提取商品名称。我们可以使用任何数据库框架（如Mongoose或Sequelize）将这个数据保存到数据库表中。

    这只是一个简单的示例，但它应该能够帮助您了解如何从前端传递数据并将其保存到数据库表中。请记住，您需要根据您使用的后端框架和数据库框架来调整代码。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 3月27日
  • 已采纳回答 3月19日
  • 创建了问题 3月18日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效