不借助表单能否将视图中的数据发送到控制器？

完全可以不依赖带input输入项的传统表单，把页面上的图片src、p标签文本等DOM内容传到控制器，最终完成数据入库，常用的实现方式有两种，你可以根据自己的业务场景选择。

可选实现方案 #

• 方案1：保留现有表单结构，动态插入隐藏字段提交
  你不需要改动现有页面的展示结构，只需要给需要取值的元素加好定位标识，在表单提交的瞬间用JS读取目标内容，插入用户不可见的隐藏input，跟着表单请求一起发给后端即可。
  首先给原有DOM元素加定位标识，补全提交触发元素：

  <form action="shoecart" method="POST" id="shoeCartForm">
      <div class="flex-container" id="shoeslist">
          <h2>Your bag</h2>
          <div class="flex-container" id="individualitem">
              <img src="storage/pic1.png" alt="shoe picture" class="cart-item-img">
              <p class="cart-item-name">name</p>
              <p class="cart-item-price">price</p>
          </div>
          <button type="submit">提交购物车</button>
      </div>
  </form>
  

  绑定表单提交事件，动态插入隐藏字段：

  const cartForm = document.getElementById('shoeCartForm');
  cartForm.addEventListener('submit', function(e) {
      e.preventDefault();
      // 读取目标DOM内容
      const itemData = {
          img: document.querySelector('.cart-item-img').getAttribute('src'),
          name: document.querySelector('.cart-item-name').textContent.trim(),
          price: document.querySelector('.cart-item-price').textContent.trim()
      };
      // 循环插入隐藏input
      Object.entries(itemData).forEach(([key, value]) => {
          const input = document.createElement('input');
          input.type = 'hidden';
          input.name = key;
          input.value = value;
          this.appendChild(input);
      });
      // 提交表单
      this.submit();
  })
  

  这种方案完全兼容你原有的表单提交逻辑，后端控制器和接收普通表单参数没有区别，直接取对应字段的值做校验、入库即可。

• 方案2：移除表单依赖，用异步请求发送数据
  如果你不需要原生表单的跳转提交能力，可以直接删掉form标签，在触发提交动作时用JS读取DOM内容，通过fetch或者XMLHttpRequest组装POST请求发给控制器接口，全程页面无刷新，交互体验更好。
  参考实现代码：

  // 绑定提交按钮点击事件，按钮id设为cartSubmit
  document.getElementById('cartSubmit').addEventListener('click', async function() {
      // 读取DOM数据
      const itemData = {
          shoe_img: document.querySelector('.cart-item-img').getAttribute('src'),
          shoe_name: document.querySelector('.cart-item-name').textContent.trim(),
          shoe_price: document.querySelector('.cart-item-price').textContent.trim()
      };
      // 发送POST请求
      const resp = await fetch('shoecart', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
              // 如果使用带CSRF校验的后端框架，记得从页面meta标签取token加到请求头
              // 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
          },
          body: JSON.stringify(itemData)
      });
      const result = await resp.json();
      // 按接口返回结果做后续逻辑，比如提示成功、跳转页面
      if (result.code === 0) {
          location.href = 'paypage';
      }
  })
  

  这种方案下后端控制器只需要解析请求体里的JSON参数，完成校验后写入数据表即可。

重要提醒：所有前端传入的参数都不可信，控制器端必须做合法性校验：比如价格字段必须为合法数值、图片路径必须属于你站点的资源存储目录，避免恶意用户篡改参数提交非法数据。

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