防止用户重复点击button的最好办法

首先申明我针对的是Google Chrome浏览器,我认为只写博客,不说明当下的编程环境,在我看来那是耍流氓,好了,不扯了,进入正题,

 $(function(){
    
    
            $('#btnSearch').click(function(){
    
    
                $(this).attr('disabled',true)
                $('#btnSearch').text('查询中。。。')
                console.log(this)
                var $Results = $('#Results');//获取页面上id为tableId的table对象
                $("#Results").empty(""); //清空table
                var tableStr;//定义一个用来拼表格内容的字符串
                jQuery.support.cors = true;
                $.ajax({
    
    
                    async:true,
                    type: 'POST',
                    url: 'http://localhost:20422/api/DPPM/DPPM_Oper',
                    contentType: "application/json;charset=utf-8", //json格式传给后端               
                    data: JSON.stringify({
    
    
                        FactoryID: $("#FactoryID").val(),
                        PNs: $("#txtPN").val(),
                        WOs:$("#texWo").val(),
                        EventPoint : $("#EventPoint").val(),
                        Categoryname : $("#Categoryname").val(),
                        dateS: $("#txtDateS").val(),
                        dateE: $("#txtDateE").val(),
                    }),
                    dataType: "json",//数据返回格式

                    success: function (data) {
    
    
                       
                        console.log(data);
                        if (data.status==0){
    
    
                            var $tr = null;
                            for (key in data.data[0]) {
    
    
                                $tr = $tr + "<td>" + key + "</td>";
                            }
                            $tr = "<tr>" + $tr + "</tr>";
                            if (data.data.length == 0) {
    
    
                                $Results.append("<tr> <td>没有数据</td> </tr>");
                            }
                            else {
    
    
                                $Results.append($tr);
                            }
                            for (var i = 0; i < data.data.length; i++) {
    
    
                                //动态创建一个tr行标签,并且转换成jQuery对象
                                var $trTemp = $("<tr></tr>");
                                //往行里面追加 td单元格
                                $trTemp.append("<td>" + data['data'][i].partno + "</td>");
                                $trTemp.append("<td>" + data['data'][i].Total + "</td>");
                                $trTemp.append("<td>" + data['data'][i].FA + "</td>");
                                $trTemp.append("<td>" + data['data'][i].dppm + "</td>");
                                $trTemp.append("<td>"+"<button οnclick='chickMe(this)' data-partno="+"'"+
                                    data['data'][i].partno+"'"+
                                    " data-FactoryID="+"'"+ $("#FactoryID").val()+"'"+
                                    " data-WOs="+"'"+ $("#texWo").val()+"'"+
                                    " data-EventPoint="+"'" +$("#EventPoint").val()+"'"+
                                    " data-Categoryname="+"'"+ $("#Categoryname").val()+"'"+
                                    " data-dateS="+"'"+ $("#txtDateS").val()+"'"+
                                    " data-dateE="+"'"+ $("#txtDateE").val()+"'"+
                                    ">导出</button>" +"</td>");
                                $trTemp.appendTo($Results);
                            }
                        }
                        else{
    
    
                            alert (data.message)
                        }
                        $('#btnSearch').text('查询')
                        $('#btnSearch').attr("disabled",false);
                    },
                    error: function (err) {
    
    
                        console.log(err);
                        $('#btnSearch').text('查询')
                        $('#btnSearch').attr("disabled",false);
                        alert('失敗');
                    },
                    
                });
               
            })
        })

这是我的完整代码
按钮不可访问,下面代码:

$(this).attr('disabled',true)
$('#btnSearch').text('查询中。。。')

按钮功能恢复

 $('#btnSearch').text('查询')
 $('#btnSearch').attr("disabled",false);
 $('#btnSearch').removeAttr("disabled");

然而奇怪的是下面这种写法,是我从网上查的,但是不起作用,很郁闷,到现在都没有搞清楚这是为什么,这三种写法有什么区别,

$('#btnSearch').attr("disabled",""); 

还有一点应该注意,设置disabled属性为fales时,要写在success和error回调函数中

猜你喜欢

转载自blog.csdn.net/m0_50623581/article/details/108561561
今日推荐