这个图片为了商业机密,我只能截图到这里了,哈哈。
就像很多互联网网站一样,你如果是游客的话,也可以打开很多页面进行相关的信息进行查看,比如你可以打开1.html、2.html,但是这两个页面都可以点击登录按钮弹出登录框。那么问题来了,你怎么保证从1.html打开登录的时候还跳转到1.html,从2.html打开登录成功后还跳转到2.html。
好吧,先说到这,这里卖个关子,我们继续看下个章节。
ajax请求与返回信息处理
1.弹出登录窗口
/** * 弹出登录框 */ function show_pop_login() { $.weeboxs.open(common.ctx + "/pages/login/login.jsp", { boxid : 'pop_user_login', contentType : 'ajax', showButton : false, showCancel : false, showOk : false, title : '会员登录', width : 700, type : 'wee' }); }
这是弹出登录框,至于weebox,你可以查看jquery weebox总结。
注意:
这里可能是从1.html打开的,也可能是从2.html页面打开的登录框。
2.然后我们再来看看登录的form表单
<form action="${ctx}/login?callbackType=closeCurrent" method="post" onsubmit="return validateCallback(this, dialogAjaxDone);"> <div> <div> <label for="name">用户登录</label> </div> <div> <div> <div> <label for="name">账户</label> </div> <div> <input type="text" placeholder="请输入会员编号" autocomplete="off"> </div> </div> </div> <div> <div> <div> <label for="name">密码</label> </div> <div> <input type="password" placeholder="请输入登陆密码"> </div> </div> </div> <div> <div> <label> <input type="checkbox"> 记住我(下次自动登陆) </label> </div> </div> <div> <button type="submit">提交</button> </div> </div> </form>
注意:
你需要关注action=”${ctx}/login?callbackType=closeCurrent”
再关注onsubmit=”return validateCallback(this, dialogAjaxDone);”
好吧,我们先来看看登录的界面吧。
很漂亮的登录框,漂亮的不像实力派!嘻嘻。
然后关键的部分来了,请继续关注下节,我把发送ajax请求也放在下节的代码中,就省得重复。
页面间智能跳转
1.提交请求
/** * 普通ajax表单提交 * * @param {Object} * form * @param {Object} * callback * @param {String} * confirmMsg 提示确认信息 */ function validateCallback(form, callback, confirmMsg) { var $form = $(form); if (!$form.valid()) { return false; } var _submitFn = function() { var forwardUrl = window.location.href; var formUrl = $form.attr("action"); if (formUrl.indexOf("?") != -1) { formUrl += "&forwardUrl=" + forwardUrl; } else { formUrl += "?forwardUrl=" + forwardUrl; } $.ajax({ type : form.method || 'POST', url : formUrl, data : $form.serializeArray(), dataType : "json", cache : false, success : callback || YUNM.ajaxDone, error : YUNM.ajaxError }); } if (confirmMsg) { alertMsg.confirm(confirmMsg, { okCall : _submitFn }); } else { _submitFn(); } return false; }
好吧,看到这,你也许会说我剽窃了DWZ的灵感,OK,既然zhanghuihua同学开源了,有必要我们就好好的利用是吧。
注意:
你看到了forwardUrl的相关代码,没错,这个关键的字段就是来传递发起请求的页面路径,比如说1.html,2.html。
然后,ajax执行成功后,也就是登陆成功后,我们要执行callback方法,也就是dialogAjaxDone方法,那么你需要继续看下去。
2.回调函数
/** * dialog上的表单提交回调函数 服务器转回forwardUrl,可以重新载入指定的页面. * statusCode=YUNM.statusCode.ok表示操作成功, 自动关闭当前dialog */ function dialogAjaxDone(json) { YUNM.ajaxDone(json); if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) { if ("closeCurrent" == json.callbackType) { close_pop(); } // 如果指定了后调转页面,进行调转 if (json.forwardUrl) { location.href = json.forwardUrl; } } } ajaxDone : function(json) { if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) { if (json[YUNM.keys.message]) $.showErr(json[YUNM.keys.message]); ; } else if (json[YUNM.keys.statusCode] == YUNM.statusCode.timeout) { alertMsg.error(json[YUNM.keys.message]); } },
注意: