提交按钮后,由于处理时间有点长,我希望是用户点击按钮后,按钮变成不可用状态,等处理结果返回回来显示完成后,再让按钮可用,结果一番摸索,现在给出代码
<div class="layui-col-lg-offset10 layui-col-md-offset10 layui-col-sm-offset10 layui-col-xs-offset10"> <!--<button id="btn123" class="layui-btn" lay-submit lay-filter="*" >导出</button>--> <input type="button" id="btn123" value="导出" class="layui-btn layui-btn-danger"/> </div>
js核心部分
$("#btn123").click(function () { //console.log('btn123被点击....'); let btn=$("#btn123"); btn.addClass("layui-btn-disabled"); btn.attr("disabled", "true"); //获取表单中的值 let title=$("#title").val(); let author=$("#author").val(); let abstract1=$("#abstract1").val(); let abstract2=$("#abstract2").val(); let keyword1=$("#keyword1").val(); let keyword2=$("#keyword2").val(); let foreword=$("#foreword").val(); let backgroud=$("#backgroud").val(); let content=$("#content").val(); let tailer=$("#tailer").val(); let filename=''; $.ajax({ type: "post", url:ApiUrl+"Query/exportWord", async: true,//这里必须使用true,否则按钮失效样式不可用 data:{ 'title':title, 'author':author, 'abstract1':abstract1, 'abstract2':abstract2, 'keyword1':keyword1, 'keyword2':keyword2, 'foreword':foreword, 'backgroud':backgroud, 'content':content, 'tailer':tailer }, //contentType: "application/x-www-form-urlencoded;charset=UTF-8",//不写contentType,默认就是这个 dataType: "json", success: function (s) { console.log("s", s); if(s.code==="200") { filename =s.data; //2.下载这个刚刚生成好的txt文件 if(filename!==''){ let url = ApiUrl +"Query/download2?filePath=E:/uploadM/"+filename+"&fileName="+'案例教学素材库.doc'; //执行下载 download(url); }else{ layer.msg("导出文档失败"); } btn.removeClass("layui-btn-disabled"); btn.removeAttr("disabled"); } }, error: function (error) { layer.msg(error); } }); return false; });