ajax请求如何避免表单重复提交

阅读原文

【场景】

ajax请求如何避免表单重复提交的情况

【解答】

以coframe为例，用ajax请求避免表单重复提交，点击提交表单按钮后，让按钮失效，然后回调方法执行后再将按钮激活，如：

进行数据实体批量授权时，点击“批量授权”按钮，按钮变为灰色不可点击，执行授权逻辑后，调用回调方法，按钮重新变为可点击状态

实体授权页面路径:default\entityauth\rule\entity_rule_auth.jsp，关键代码：

// 保存权限 function saving(e){ e.sender.setEnabled(false); var entityWithAuth = []; var entityNoAuth = []; var ruleData = grid.getData(); if (ruleData.length<1)return; for(var i = 0; i < ruleData.length; i++){ if(ruleData[i].auth == "1"){ entityWithAuth.push(ruleData[i].id); }else{ entityNoAuth.push(ruleData[i].id); } } var sendData = {party:{"id":"<%= partyId%>", "partyTypeID": "<%=partyType %>"}, partyWithAuth:entityWithAuth, partyNoAuth:entityNoAuth}; $.ajax({ url:"org.gocom.components.coframe.entityauth.rule.storePartyAuth.biz.ext", type: "POST", data: nui.encode(sendData), cache: false, contentType: "text/json", success: function(res){ var returnJson = nui.decode(res); if(res.exception || res.saveResult == false){ nui.alert("权限设置失败"); }else{ nui.alert("权限设置成功"); } grid.reload(); grid.deselectAll(); e.sender.setEnabled(true); }, error: function () { nui.alert("权限设置失败"); e.sender.setEnabled(true); } }); }