javascript - [加入购物车功能] 为什么表单提交之后，如果切换一下页面，再切换回来，再点击提交，就没有反应了？-PHP中文网问答

背景和问题

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

环境

ruby on rails
bootstrap
jquery

调试信息

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

怀疑点

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

其他网站的实现

亚马逊为例，可以多次点击加入购物车按钮，是用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

京东为例，可以多次点击加入购物车按钮，是用get请求实现的。

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

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

前端代码片段


  
    
      Name
      Description
      Price
      Show
      Edit
      Destroy
      Amount
      购买
      
    
  

  
      
        
          西红柿
          西红柿
          30.0
          Show
          Edit
          Destroy
          
          
          
      
          
         
          

        
      
      
        
          土豆
          土豆
          30.0
          Show
          Edit
          Destroy

Name	Description	Price	Show	Edit	Destroy	Amount	购买
西红柿	西红柿	30.0	Show	Edit	Destroy
土豆	土豆	30.0	Show	Edit	Destroy

全部回复(3)

阿神2017-04-11 12:05:46 3楼

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

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

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

赞 +0

添加回复

PHP中文网2017-04-11 12:05:46 2楼

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

阿神2017-04-11 12:05:46 1楼

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