html中使用js進行登入md5加密提交併重定向新頁面
阿新 • • 發佈：2019-02-11
在web開發中有時需要將使用者的一些資訊在客戶端加密後進行提交，然後在web後端進行驗證，可以提高頁面傳輸過程中的安全性。本例實現一個簡單的加密登入demo，例子僅僅為了演示使用，實際使用時可以根據實際要求進行修改。
1、主要實現點
1、form中加入一個隱藏的input用於提交加密後的密文；
2、在表單的submit方法中將輸入的明文密碼加密，並設定到隱藏的input中。加密使用md5.js進行實現，該檔案可自行百度；
3、在表單的submit方法中使用ajaxSubmit提交form；
本例用於演示，提交時會同時提交明文和密文密碼，實際使用時可以將明文輸入框改為不提交或者放到form表單之外即可。
2、程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用者登入</title> <link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/style.css" /> <link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/body.css"/> <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-form.js"></script> <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-validate.js"></script> <script type="text/javascript" src="/CarAppStore/js/noty/packaged/jquery.noty.packaged.min.js"></script> <script type="text/javascript" src="/resource/rcs/safe/md5.js"></script> <script type="text/javascript"> $(document).ready(function() { var url="manage/updater.shtml"; var baseRef = window.location.href; var aa = baseRef.indexOf("="); if(0 < aa) { url=baseRef.substring(aa+1); } //ajax submit. $("#formLogin").submit(function() { var tmp = hex_md5($("#password").val()); $("#txt_passwd").val(tmp); $(this).ajaxSubmit({ success: function(data) { // data 儲存提交後返回的資料，一般為 json 資料 var obj = eval("("+data+")"); if(obj.result=="ok") { window.location.assign(url); } else { $.noty.consumeAlert({layout: 'top', type: 'error', dismissQueue: true,timeout:2000}); alert("登入失敗,請重試!"); } } }); return false; }); }); </script> </head> <body> <div class="container"> <section id="content"> <form id="formLogin" name="formLogin" action="userLogin.shtml" method="post" target="fmResult"> <h1>使用者登入</h1> <div> <input type="text" placeholder="使用者名稱" required="" id="username" name="account"/> </div> <div> <input type="password" placeholder="密碼" required="" id="password" name="password"/> </div> <div class=""> <span class="help-block u-errormessage" id="js-server-helpinfo"> </span> </div> <div> <input type="submit" value="登入" class="btn btn-primary" id="js-btn-login" style="float: left;"/> <input type="reset" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;"/> </div> <div> <input type="hidden" id="txt_passwd" name="passwd"/> </div> </form> </section><!-- content --> <div> <iframe width="1px" height="1px" name="fmResult" style="display: none;"></iframe> </div> </div> <!-- container --> </body> </html>
3、執行效果
後端返回認證的json字串，如果客戶端認證通過將重定向到一個新頁面，該頁面通過位址列引數傳入，沒有時使用預定的預設值。失敗時彈出一個noty的提示框（如上圖）。