前端解决刷新页面表单重复提交_前端js浏览器刷新会导致表单默认提交刷新前的

起因

今天测试组提出一个BUG，用户登录失败的时候，点击刷新按钮会导致表单重复提交，增加用户登录错误次数。

前提

现在的项目使用luci框架，前后端不分离（lua和C混写，说实话前端分离做习惯了，让我觉得很头疼）。
因为我不会写lua和C，而且做这个项目后端开发的已经离职了，所以我只能通过前端去解决这个问题。

问题分析

第一次进入登录页面可以看到是GET方式请求的页面数据。

点击登录按钮，表单提交方式是POST，返回的页面也是由后端直接生成。
由此可以得知，后端针对登陆路由分别写了GET和POST两种处理方式。

当我去刷新网页，页面又执行了一次提交表单的操作。

解决办法

当用户登录失败后，使用GET去重新获取登录页面。
1

通过问题分析我们可以得知，当用户登录失败时由POST返回生成页面。当我去刷新页面时，对登陆路由又执行了一次POST请求，所以后端对刷新页面这个动作进行的是解析登录操作。

其实我还去尝试其他很多种方法，但是都没有生效。

最后我只能在用户登录失败之后，使用location.replace("<%=luci.dispatcher.build_url()%>?_n=" + "<%=count%>")，这样会使页面用GET方式去获取登录页面。

可能这种方式看起来有些暴力，但对我当前来说能解决问题就是最好的办法，以后想到了更好的办法再更新一下。