javascript - [加入购物车功能] 为什么表单提交之后,如果切换一下页面,再切换回来,再点击提交,就没有反应了?
PHP中文网
PHP中文网 2017-04-11 12:03:46
0
4
340

背景和问题

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

环境

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传统。

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

前端代码片段

Name Description Price Show Edit Destroy Amount 购买
西红柿 西红柿 30.0 Show Edit Destroy
土豆 土豆 30.0 Show Edit Destroy
PHP中文网
PHP中文网

认证高级PHP讲师

모든 응답 (4)
阿神

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

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

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

    左手右手慢动作

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

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

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

        Title 
      

    Resources

    • w3在线校验

    • netsting form and table

      Ty80

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

        阿神

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

          최신 다운로드
          더>
          웹 효과
          웹사이트 소스 코드
          웹사이트 자료
          프론트엔드 템플릿
          회사 소개 부인 성명 Sitemap
          PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!