DWZ 自定义异常及后台校验
1.form表单提交弹出自定义异常
示例:
<form
id="pagerForm"
method="post" action="后台访问地址"
class="pageForm required-validate" onsubmit="return validateCallback(this,dialogAjaxDonereload)">
</form>
项目中默认使用:validateCallback 当前ajax提交在 dwz.ajax.js中,部分源码:
var _submitFn = function(){ $.ajax({ type: form.method || 'POST', url:$form.attr("action"), data:$form.serializeArray(), dataType:"json", cache: false, success: callback || DWZ.ajaxDone, error: DWZ.ajaxError }); };
DWZ.ajaxError 会返回服务器异常信息在dwz.core.js 其中源码如下:
ajaxError:function(xhr, ajaxOptions, thrownError){ if (alertMsg) { alertMsg.error("<div>Http status: " + xhr.status + " " + xhr.statusText + "</div>" + "<div>ajaxOptions: "+ajaxOptions + "</div>" + "<div>thrownError: "+thrownError + "</div>" + "<div>"+xhr.responseText+"</div>"); } else { alert("Http status2: " + xhr.status + " " + xhr.statusText + "\najaxOptions: " + ajaxOptions + "\nthrownError:"+thrownError + "\n" +xhr.responseText); } }
在上面源码下新增一个DWZ出现error的信息,抛出自定义异常的时候只返回异常文本信息:
ajaxErrorMsg:function(xhr, ajaxOptions, thrownError){ if (alertMsg) { alertMsg.info("<div>"+xhr.responseText+"</div>"); } else { alert("Http status2: " + xhr.status + " " + xhr.statusText + "\najaxOptions: " + ajaxOptions + "\nthrownError:"+thrownError + "\n" +xhr.responseText); } }
在dwz.ajax.js中复制一份validateCallback 的源码 修改方法名validateCallbackMsg,修改error的调用 使用刚刚新增的ajaxErrorMsg:
var _submitFn = function(){ $.ajax({ type: form.method || 'POST', url:$form.attr("action"), data:$form.serializeArray(), dataType:"json", cache: true, success: callback || DWZ.ajaxDone, error: DWZ.ajaxErrorMsg }); };
使用时直接使用validateCallbackMsg
2.A 连接抛出自定义异常
示例:
<a id="id" class="edit" href="后台地址" target="ajaxTodo">下发通知</a>
提交后会通过target中的ajaxTodo方法进行提交:ajaxTodo 是dwz.ajax.js中,新增ajaxTodoMsg:
function ajaxTodo(url, callback){ console.info(11111111111111111112); var $callback = callback || navTabAjaxDone; if (! $.isFunction($callback)) $callback = eval('(' + callback + ')'); $.ajax({ type:'POST', url:url.split('?')[0], data:url.split('?')[1], dataType:"json", cache: false, success: $callback, error: DWZ.ajaxError }); } function ajaxTodoMsg(url, callback){ var $callback = callback || navTabAjaxDone; if (! $.isFunction($callback)) $callback = eval('(' + callback + ')'); $.ajax({ type:'POST', url:url.split('?')[0], data:url.split('?')[1], dataType:"json", cache: false, success: $callback, error: DWZ.ajaxErrorMsg }); }
jquery扩展,在$.fn.extend中,修改后的如下:
$.fn.extend({ ajaxTodo:function(){ return this.each(function(){ var $this = $(this); $this.click(function(event){ var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first")); DWZ.debug(url); if (!url.isFinishedTm()) { alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg")); return false; } var title = $this.attr("title"); if (title) { alertMsg.confirm(title, { okCall: function(){ ajaxTodo(url, $this.attr("callback")); } }); } else { ajaxTodo(url, $this.attr("callback")); } event.preventDefault(); }); }); },ajaxTodoMsg:function(){ return this.each(function(){ var $this = $(this); $this.click(function(event){ var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first")); DWZ.debug(url); if (!url.isFinishedTm()) { alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg")); return false; } var title = $this.attr("title"); if (title) { alertMsg.confirm(title, { okCall: function(){ ajaxTodoMsg(url, $this.attr("callback")); } }); } else { ajaxTodoMsg(url, $this.attr("callback")); } event.preventDefault(); }); }); } });
上面源码 新增了一个ajaxTodoMsg 其中的ajaxTodoMsg调用在dwz.ui.js
if ($.fn.ajaxTodo) $("a[target=ajaxTodo]", $p).ajaxTodo();
if ($.fn.ajaxTodoMsg) $("a[target=ajaxTodoMsg]", $p).ajaxTodoMsg();
3 需要a连接提交方法前后台先验证如下修改:
//dialogs 其他a链接[target=dialog] target属性值不同的一样用此方法修改
$("a[target=dialog]", $p).each(function(){ $(this).click(function(event){ var $this = $(this); //打开前的数据校验。 使用Validation属性 Validation=“A()” var _callback = $this.attr("Validation"); if (_callback != undefined && !$.isFunction(_callback)) { _callback = eval("("+_callback+")" ); if (!_callback) return false; } ....................省略.........................
使用方法 在A连接上增加:Validation=“A()”
A()为js方法,JS中异步访问后台校验方法,返回 Boolean
JS中的Ajax后台校验对返回的false进行验证提示,相对比自定义异常麻烦。