The best way to prevent users from clicking the button repeatedly

First of all, I declare that I am targeting the Google Chrome browser. I think I only write a blog and do not explain the current programming environment. In my opinion, it is a hooliganism. Okay, let’s not talk about it. Let’s get to the point.

 $(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 is my complete code The
button is not accessible, the following code:

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

Button function recovery

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

However, the strange thing is that the following writing method, I checked from the Internet, but it does not work, very depressed, until now I have not figured out why this is, what is the difference between these three writing methods,

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

It should also be noted that when setting the disabled attribute to fales, it should be written in the success and error callback functions.

Guess you like

Origin blog.csdn.net/m0_50623581/article/details/108561561