关于页面上一次点击，发送多次请求的问题

今天在实现功能的时候发现了一个问题， 在做一个导入的时候，第几次点击导入按钮，就会发送几次请求到后台的问题

页面标签：

<a href="javascript:void(0);"  class="dowload" onclick="contributionStatis_setting.exportExcel();">

js 代码（问题代码）：

/**
         * 导出
         */
        exportExcel:function (ids){
            $("#tipMask").show();
        
            var statis_time = $("#search_time a[class=cur]").html();
            if(statis_time == "全部"){
                statis_time = " ";
            }
            //搜索关键字
            //var keyword =$.trim($("#keyword").val());
            // 时间
            var search_time = $("#search_time a[class=cur]").attr("value");                        
            var beginOn = $("#start").val();
            var endOn = $("#end").val();
            if (search_time!=undefined){
                if (search_time==""){
                    beginOn =search_time;
                }else{
                    
                    beginOn = contributionStatis_setting.getdesignateDate(search_time);
                }
                endOn = contributionStatis_setting.getdesignateDate(0);
            }else{
                if (checkNull(beginOn)) {
                    tipDialog("fail","请选择开始时间");
                    return;
                }
                if (checkNull(endOn)) {
                    tipDialog("fail","请选择结束时间");
                    return;
                }
            }
          
            $("#statis_contribution_export").show();
            $("#statis_contribution_export_btn").click(function () {
                $(".BoxWrap").hide();
                $("#tipMask").hide();
                
                window.document.exportform.action = WEB_URL + "/views/DataContributeList/statis_Contribute_excel?statis_time="+statis_time
                +"&beginOn="+beginOn+"&endOn="+endOn+"&keyword="+keyword;
                window.document.exportform.submit();               
            });
        },

后来发现是 <a> 标签绑定了 click 事件， 才一直叠加， 出现第几次点击， 发送几次请求的问题， 解决方案是：

　　先解开绑定的 click 事件  .unbind(‘click‘) 然后在做绑定。

js 代码（正确代码）：

/**
         * 导出
         */
        exportExcel:function (ids){
            $("#tipMask").show();
        
            var statis_time = $("#search_time a[class=cur]").html();
            if(statis_time == "全部"){
                statis_time = " ";
            }
            //搜索关键字
            //var keyword =$.trim($("#keyword").val());
            // 时间
            var search_time = $("#search_time a[class=cur]").attr("value");                        
            var beginOn = $("#start").val();
            var endOn = $("#end").val();
            if (search_time!=undefined){
                if (search_time==""){
                    beginOn =search_time;
                }else{
                    
                    beginOn = contributionStatis_setting.getdesignateDate(search_time);
                }
                endOn = contributionStatis_setting.getdesignateDate(0);
            }else{
                if (checkNull(beginOn)) {
                    tipDialog("fail","请选择开始时间");
                    return;
                }
                if (checkNull(endOn)) {
                    tipDialog("fail","请选择结束时间");
                    return;
                }
            }
          
            $("#statis_contribution_export").show();
            $("#statis_contribution_export_btn").unbind(‘click‘).click(function () {
                $(".BoxWrap").hide();
                $("#tipMask").hide();
                
  
             window.document.exportform.action = WEB_URL +
"/views/DataContributeList/statis_Contribute_excel?statis_time="+statis_time
                +"&beginOn="+beginOn+"&endOn="+endOn+"&keyword="+keyword;
                window.document.exportform.submit();               
            });
        },

时间： 2024-08-11 01:34:38

关于页面上一次点击，发送多次请求的问题的相关文章

axios发送两次请求原因及解决方法

axios发送两次请求原因及解决方法 最近Vue项目中使用axios组件,在页面交互中发现axios会发送两次请求,一种请求方式为OPTIONS,另外一种为自己设置的. 如图: 什么是CORS通信? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制. CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏

JQuery模拟点击页面上的所有a标签，触发onclick事件

注意: 这种方法需要给所有的a标签加上id属性 <script> $(function () { // 模拟点击页面上的所有a标签,触发onclick事件 $("a").each(function () { document.getElementById(this.id).click(); }) }) </script> 原文地址:https://www.cnblogs.com/daleyzou/p/9500782.html

jquery，从后台查数据，给页面上添加树形。

前台jquery+ajax请求往页面上添加树形的js代码 1 //传入当前点击节点的id,在后台代码查询出parentid=当前节点id的记录数,从而实现点击当前节点,往后台发送ajax请求,查询出子节点的集合,往父节点下拼接页面 2 function treeNode(pid){ 3 4 //如果<li id="pid">标签下的<ul>的长度为1,则说明需要发送ajax请求,往其中添加子节点.如果长度大于1说明添加过了,不用再次发送ajax请求.直接进els

Acrobat 无法在本页面上执行OCR识别

下载的电子书有时不能选中,或作黄色标记,在用acrobat pro作文本识别时,报 Acrobat 无法在本页面上执行OCR识别 解决方法 参照 http://jingyan.baidu.com/article/ad310e80bc8d851849f49eb3.html Acrobat 无法在本页面上执行OCR识别 ,在我们使用文本识别时候会经常遇到的情况. 本页面包含可渲染的文本或者其他错误的解决. Acrobat could not perform recognition (OCR) on

程序员在页面上常犯的错误以及改正方法

我是一个性情乖戾的Web用户,但我想这也帮助促使我成为了一名优秀的Web开发人员.当我看到一个网站上有让人不爽的设计时就会非常的恼怒,一些很简单的东西为什么做不好?下面是5种常见的可用性方面的错误,以及如何纠正这些问题的方法.给自己方便,也与人方便,确保自己不要犯这样的错误. 使用表达submit事件,不要用click事件:请用表单标签form! 我不知道遇到过多少次,当我使用回车键提交一个表单时(或手机上用箭头/输入键),却什么都没发生.我只好又用鼠标点击提交按钮,表单终于有了反应.这是我最痛

如何在页面上减少用户操作？

页面上很多本该可以让用户少操作的地方,都没有做好优化,导致一个相同的页面,用户在其他app可能输入一次或点击一下就好了,在我们app可能操作要翻倍.所以给用户留下了繁琐.难操作的印象. 最近有同事在公司反馈:"有用户说xx流程.xx流程太繁琐了."产品经理反驳:"怎么可能,我已经对标过业内很多体验很好的app,流程上的步骤我敢保证我们绝对不比别人多." 作为"好事"的交互,我决定走查一下流程,看看问题出在哪里. 产品经理没有说谎,被用户吐槽的几个

页面上画按钮的四种方法

在一个页面上画一个按钮,有四种办法: <input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生. <input type="submit" /> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它. <button> 这个按钮放在 form 中也会点击自动提交,比前两个的优点是按钮的内容不光可以有文字,还可以有图片等多媒体内容.(当然

22SpringMvc_jsp页面上的数据传递到控制器的说明

假设有这个一个业务:在jsp页面上写入数据,然后把这个数据传递到后台. 效果如下: 输入信息后点击确定,把这些信息保存到后台. 点击确定后.来到这里: 这就是效果. ----------------------------------------------------------------------------------------------------------------------------------- 我们给出具体的案例然后给出分析: 1.jFactoryCreate.j

在页面上动态添加和删除【添加信息的文本框】

页面上的内容: 当点击添加或删除会做出相应的操作 页面的html代码 1 <li id="clid"> 2 <div> 3 姓名:<input type="text" name="guestName" class="dfinput" style="width: 150px;"/> 4     国别:<input name="guestState"