如何在Twitter Bootstrap模态框中使用Ajax插入产品记录

嘿，我来帮你搞定这个需求！你已经有了触发模态框的按钮，接下来我把完整的实现代码和逻辑整理给你，直接就能用：

1. 补全模态框与列表容器的HTML #

首先把你的模态框补全，加上产品名称、数量的输入表单，还有用来展示产品的列表容器：

<!-- 你已有的触发按钮 -->
<a data-toggle="modal" data-target="#myDesayuno" href="#" class="btn btn-primary">Desayunos <span class="glyphicon glyphicon-plus-sign"></span></a>

<!-- 用来展示产品的列表容器 -->
<ul id="productList" class="list-group mt-3">
  <!-- 动态添加的产品项会在这里显示 -->
</ul>

<!-- 完整的Bootstrap模态框 -->
<div class="modal fade" id="myDesayuno" tabindex="-1" role="dialog" aria-labelledby="desayunoModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="desayunoModalLabel">添加早餐产品</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="addProductForm">
          <div class="form-group">
            <label for="productName">产品名称</label>
            <input type="text" class="form-control" id="productName" placeholder="比如：牛奶面包" required>
          </div>
          <div class="form-group">
            <label for="productQuantity">数量</label>
            <input type="number" class="form-control" id="productQuantity" min="1" placeholder="至少1份" required>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="submitProduct">添加到列表</button>
      </div>
    </div>
  </div>
</div>

2. 编写JavaScript处理提交逻辑 #

接下来写JS代码，监听添加按钮的点击，获取输入的产品信息，然后动态添加到列表里，顺便加了个删除功能（不需要的话可以删掉）：

// 等页面DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取需要用到的元素
  const submitBtn = document.getElementById('submitProduct');
  const nameInput = document.getElementById('productName');
  const quantityInput = document.getElementById('productQuantity');
  const productList = document.getElementById('productList');

  // 监听添加按钮的点击事件
  submitBtn.addEventListener('click', function() {
    // 获取输入值并去除前后空格
    const productName = nameInput.value.trim();
    const productQty = parseInt(quantityInput.value.trim());

    // 简单验证输入是否有效
    if (productName && !isNaN(productQty) && productQty >= 1) {
      // 创建新的列表项
      const listItem = document.createElement('li');
      listItem.className = 'list-group-item d-flex justify-content-between align-items-center';
      listItem.innerHTML = `
        <span><strong>${productName}</strong> - 数量: ${productQty}</span>
        <button class="btn btn-sm btn-danger delete-item">删除</button>
      `;

      // 把列表项添加到列表里
      productList.appendChild(listItem);

      // 给删除按钮绑定点击事件
      listItem.querySelector('.delete-item').addEventListener('click', function() {
        listItem.remove();
      });

      // 清空表单并关闭模态框
      document.getElementById('addProductForm').reset();
      $('#myDesayuno').modal('hide');
    } else {
      // 提示用户输入正确的内容
      alert('请输入有效的产品名称和数量哦，数量至少是1~');
    }
  });
});

3. 必要的依赖引入 #

别忘了在页面里引入Bootstrap的CSS、jQuery和Bootstrap的JS文件（顺序不能乱）：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

这样一套下来，点击你的Desayunos按钮就能打开模态框，输入产品信息后点击添加，就能把产品加到列表里了，还能删除不需要的项，完美满足你的需求！

内容的提问来源于stack exchange，提问作者fytoahse