提交ajax请求时,动态修改按钮不可用失效解决办法
·
提交按钮后,由于处理时间有点长,我希望是用户点击按钮后,按钮变成不可用状态,等处理结果返回回来显示完成后,再让按钮可用,结果一番摸索,现在给出代码
<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;
});
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)