[加入购物车功能] 为什么表单提交之后,如果切换一下页面,再切换回来,再点击提交,就没有反应了?

背景和问题

想实现的功能是加入购物车,多次点击加入购物车按钮,商品都能加入购物车。
目前的问题是如果在商品列表页面,刷新一下,就可以连续一直提交。如果在导航栏切换到别的页面,在切换回来,就点击按钮无效了。必须刷新一下当前页(商品列表页)才能添加。

环境

ruby on rails
bootstrap
jquery

调试信息

在出问题的时候,观察浏览器调试inspect, network和console都没有任何信息输出。
服务端无log 

怀疑点

下面有朋友提到的。可能是前端什么地方出了问题,避免了重复提交。

其他网站的实现

  1. 亚马逊为例,可以多次点击加入购物车按钮,是用form实现的。

https://www.amazon.cn/s/ref=nb_sb_noss_1?__mk_zh_CN=%E4%BA%9A%E9%A9%AC%E9%80%8A%E7%BD%91%E7%AB%99&url=search-alias%3Daps&field-keywords=ruby
  1. 京东为例,可以多次点击加入购物车按钮,是用get请求实现的。

href="//cart.jd.com/gate.action?pid=11524040&pcount=1&ptype=1"
京东的每一个商品,事先会生成一个href,pid应该就是商品ID,但是感觉这种实现并不符合REST传统。

为什么表单提交之后,如果后退回来,再点击提交,就没有反应了?
只有再刷新页面后,再点击,才能再次提交。

前端代码片段

<table class="table table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Price</th>
      <th>Show</th>
      <th>Edit</th>
      <th>Destroy</th>
      <th>Amount</th>
      <th>购买</th>
      <th colspan="5"></th>
    </tr>
  </thead>

  <tbody>
      <tr>
        <form action="/carts" method="post" target="_blank">
          <td>西红柿</td>
          <td>西红柿</td>
          <td>30.0</td>
          <td><a href="/products/1">Show</a></td>
          <td><a href="/products/1/edit">Edit</a></td>
          <td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/products/1">Destroy</a></td>
          <input name="cart[product_id]" value="1" type="hidden"  />
          
          <input name="cart[user_id]" value="2" type="hidden"  />
      
          <td><input  type="number" name="cart[amount]" required="true" max="100" ></td>
         
          <td><button  type="submit" class="btn btn-primary">加入购物车</button></td>

        </form>
      </tr>
      <tr>
        <form action="/carts" method="post" target="_blank">
          <td>土豆</td>
          <td>土豆</td>
          <td>30.0</td>
          <td><a href="/products/2">Show</a></td>
          <td><a href="/products/2/edit">Edit</a></td>
          <td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/products/2">Destroy</a></td>
          <input name="cart[product_id]" value="2" type="hidden" />
          
          <input name="cart[user_id]" value="2" type="hidden"  />
      
          <td><input id="inputAmount" type="number" name="cart[amount]" required="true" max="100" ></td>
         
          <td><button  type="submit" class="btn btn-primary">加入购物车</button></td>

        </form>
      </tr>
  </tbody>
</table>
阅读 5.5k
4 个回答

应该是有一种机制 避免了 表单反复提交的问题,这样必须刷新之后才可以重新提交。

我猜会不会是这样:因为你是form提交,那么点击submit后,form就组织数据提交(请求),在响应前(返回新页面),sumbit无效(或者是丢弃原来未完成的提交(请求),重新提交),而很多浏览器在你form提交后无论是否已经返回新页面,F5刷新,就是会提示你是否重新提交(刷新的意义浏览器理解为重复上一次请求,只不过form提交是一次特殊的),,,一般情况下,规避重复提交是ajax的时候....不知道对不对。

可以通过查看服务器端Log验证这个想法~

解决了,改为使用div包含form, 原因不明。可能是框架中的某些组件影响。

对于form表单不能被包含在table标签中,娃娃脾气兄回应否定此说法。
netsting form and table这篇文章中提到了,如果在table中包含form,需要完全独立包含在<td>里面,而不能是<tr>里面。

如果像下面这样校验,就会报错,但是页面效果并不影响,还能工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
      <form action="http://www.baidu.com">
        <td>
                <input type="text" name="w" value="a">
                <input type="submit">
        </td>
      </form>
    </tr>
</table>
</body>
</html>

Resources

这个,我想知道你后退操作哪里来的呢?你不是_blank新的窗口打开么?而且,好像后退input里面的值就清空了吧?确定用的是表单提交,如果是ajax可以看看是不是没绑事件

1.我想如果可以你把地址贴出来,我看一下。
2.既然说是切换了标签以后会出现这样的问题,那么a)你是如何控制标签切换的? b)把标签的数量改为2个,同时把另外一个标签的内容设置为静态的html数据。
3.我看你的html中“加入购物车”这个button,给了一个id,叫做addToCart。首先一个页面中不要出现相同的ID的标签,其次你查看一下js代码,是否有监听这个addToCart的button呢,如果有,问题则可能出现在这里。

推荐问题