vue.js怎样解决按钮多次点击重复提交

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js怎样解决按钮多次点击重复提交相关的知识，希望对你有一定的参考价值。

如图我需要将这个按钮在点击一次后暂时置灰，应该怎么改，最好可以直接贴代码

建议使用ref，给button添加注册ref引用，然后在表单提交的时候，获取button按钮，使其disable置灰。

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。

<div id="app">
  <button ref="mybutton" type="primary" @click="save">保存</button>
</div>

<script>
new Vue(
  el: "#app",
  data: 
  ,
  methods: 
   save() 
     this.$refs.mybutton.disabled = true;
    
  
)
</script>
<style>
:disabled   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
  
</style>

 参考技术A 设置标志性变量为ture，如 isAbled，然后在按钮初次点击后设为false，在提交请求返回后设为true，然后该变量可以在button的disable属性上使用，也可以自定义按钮，用于动态控制class，同时在点击事件回调里面进行相关判断拦截 参考技术B <div id="app">
  <button :disabled="disabled" type="primary" @click="save">保存</button>
</div>

new Vue(
  el: "#app",
  data: 
  disabled: false
  ,
  methods: 
      save() 
        this.disabled = true;
        ajax().then(()=>
            this.disabled = false;
        ,()=>
            this.disabled = false;
        )
    
  
)

本回答被提问者采纳

解决表单重复提交

为什么会出现表单重复提交问题

　　1.网络延迟的情况下用户多次点击提交按钮导致表单重复提交；

　　2.用户提交表单时，点击浏览器【刷新】按钮导致表单重复提交，就是把浏览器上次做的事情再做一次；

　　3.用户提交表单后，点击浏览器【后退】按钮回退到表单页面后进行再次提交；

表单重复提交会导致的问题

　　能够造成很多脏数据；

解决办法

　　前端解决方法：只能提交一次，监控表单的提交事件，通过boolean类型的变量来区分已经点击过一次还是没有点击，如果已经点击过一次，表单就不提交，如果没有提交，表单则会提交。

　　后端解决方法：在访问提交页面的时候，创建一个token令牌（当作一个标志），保存到session中，然后在表单提交的时候将令牌一起提交给后台，让后台判断session中的token令牌和表单提交的令牌是否一致，如果一致代表正常提交，然后将session中的数据清空，如果不相等，代表非正常提交。

代码展示

　　前端代码：

<%--
  Created by IntelliJ IDEA.
  User: wn
  Date: 2020/2/3
  Time: 16:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>表单重复提交</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
        var isFlag=false;   //表单是否已经提交标识,false代表没有点击过，true代表点击过
        function submitFlag() {
            if (!isFlag){       //取反值
                isFlag=true;
                return true;
            } else{
                return false;
            }
        }

        //token令牌
        $(function () {
            //生成令牌
            $.ajax({
                url:"tokenServlet",
                type:"POST",
                success:function (token) {
                    $("#token").val(token);
                }
            })
        })
    </script>
</head>
<body>
<form action="submitServlet" onsubmit="return submitFlag()" method="post">
    <input type="hidden" id="token" name="token"  />
    用户名：<input type="text" name="username" />
    <button type="submit">提交</button>
</form>

</body>
</html>

　　token类：

package com.wn;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.UUID;

@WebServlet("/tokenServlet")
public class TokenServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //生成令牌
        String token = UUID.randomUUID().toString();
        //令牌保存到session当中
        req.getSession().setAttribute("token",token);
        //将生成的令牌响应给页面
        resp.getWriter().write(token);
    }
}

　　后端代码：

package com.wn;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/submitServlet")
public class SubmitServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取页面中的token令牌
        String token = req.getParameter("token");
        //获取session中的token令牌
        String token1 = (String) req.getSession().getAttribute("token");
        //将页面获取的token令牌与session中的token令牌比较是否一致
        //如果不一致代表补不能重复提交，如果一致则走下面的操作
        if (!token.equals(token1)){
            resp.setContentType("text/html;charset=utf-8");
            resp.setCharacterEncoding("UTF-8");
            resp.getWriter().write("数据不能重复提交error！");
            return;
        }

        //接收页面的username属性值
        String username = new String (req.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");
        System.out.println("数据："+username);

        // //请求session中的值
        req.getSession().removeAttribute("token");

        try {
            //模拟网络延迟
            Thread.sleep(500);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //响应数据
        resp.getWriter().write("success");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       doPost(req,resp);
    }
}

 

以上是关于vue.js怎样解决按钮多次点击重复提交的主要内容，如果未能解决你的问题，请参考以下文章

阻止页面按钮多次提交的解决办法

解决表单重复提交

Vue项目按钮重复提交

Jquery 实现表单提交按钮变灰，防止多次点击提交重复数据

Jquery 实现表单提交按钮变灰，防止多次点击提交重复数据

表单的重复提交，解决方案