jQuery · TUNA-daily

[TOC] ## 1. ajax ### 1.1 ajax 基礎 > 1. ajax技術的目的： > 是讓javascript發送http請求，與后臺通信，獲取數據和信息。ajax技術的原理是實例化xmlhttp對象，使用此對象與后臺通信。ajax通信的過程不會影響后續javascript的執行，從而實現異步。 > 2. 同步和異步： > 現實生活中，同步指的是同時做幾件事情，異步指的是做完一件事后再做另外一件事，程序中的同步和異步是把現實生活中的概念對調，也就是程序中的異步指的是現實生活中的同步，程序中的同步指的是現實生活中的異步。 > 3. 局部刷新和無刷新： > ajax可以實現局部刷新，也叫做無刷新，無刷新指的是整個頁面不刷新，只是局部刷新，ajax可以自己發送http請求，不用通過瀏覽器的地址欄，所以頁面整體不會刷新，ajax獲取到后臺數據，更新頁面顯示數據的部分，就做到了頁面局部刷新。 > 4. 同源策略： > ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設計ajax時基于安全的考慮。特征報錯提示： * 注冊驗證 ### 1.2 使用ajax發送異步請求 > 常用的參數： > 1. url 請求地址 > 2. type 請求方式，默認是'GET'，常用的還有'POST' > 3. dataType 設置返回的數據格式，常用的是'json'格式，也可以設置為'html' > 4. data 設置發送給服務器的數據 > 5. success 設置請求成功后的回調函數 > 6. error 設置請求失敗后的回調函數 > 7. async 設置是否異步，默認值是'true'，表示異步 1. 使用寫法 ~~~ $.ajax({ url: 'js/user.json', # 請求的URL type: 'GET', # 請求方式 dataType: 'json', # 設置返回的數據格式，常用的是'json'格式，也可以設置為'html' data:{'aa':1} }) .done(function(data) { # 異步請求成功處理 ...... }) .fail(function() { # 請求 alert('服務器超時，請重試！'); }); ~~~ 或者這么寫 ~~~ $.get('/user/check_user/?uname=' +$('#user_name').val(),function(data){ num = data.num; if( num == 1 ){ $('#user_name').next().html('該用戶已經注冊').show(); error_name = true; }else { console.log("num:"+num); //下一個標簽隱藏 $('#user_name').next().hide(); error_name = false; } }); ~~~ ### 1.3 注冊驗證發生錯誤時，阻止表單提交 ~~~ $(function(){ var error_name = false; var error_password = false; var error_check_password = false; var error_email = false; var error_check = false; //blur 單光標離開輸入框時，觸發的事件，檢查姓名 $('#user_name').blur(function() { check_user_name(); }); $('#pwd').blur(function() { check_pwd(); }); $('#cpwd').blur(function() { check_cpwd(); }); $('#email').blur(function() { check_email(); }); $('#allow').click(function() { if($(this).is(':checked')) { error_check = false; $(this).siblings('span').hide(); } else { error_check = true; $(this).siblings('span').html('請勾選同意'); $(this).siblings('span').show(); } }); function check_user_name(){ var len = $('#user_name').val().length; if(len<5||len>20){ $('#user_name').next().html('請輸入5-20個字符的用戶名') $('#user_name').next().show(); error_name = true; }else{ var num =0; # 發送異步ajax，查詢是否用戶名已經存在 $.get('/user/check_user/?uname=' +$('#user_name').val(),function(data){ num = data.num; if( num == 1 ){ $('#user_name').next().html('該用戶已經注冊').show(); error_name = true; }else { console.log("num:"+num); //下一個標簽隱藏 $('#user_name').next().hide(); error_name = false; } }); } }; function check_pwd(){ var len = $('#pwd').val().length; if(len<8||len>20){ $('#pwd').next().html('密碼最少8位，最長20位') $('#pwd').next().show(); error_password = true; } else{ $('#pwd').next().hide(); error_password = false; } }; function check_cpwd(){ var pass = $('#pwd').val(); var cpass = $('#cpwd').val(); if(pass!=cpass) { $('#cpwd').next().html('兩次輸入的密碼不一致') $('#cpwd').next().show(); error_check_password = true; } else { $('#cpwd').next().hide(); error_check_password = false; } }; function check_email(){ var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/; if(re.test($('#email').val())) { $('#email').next().hide(); error_email = false; } else { $('#email').next().html('你輸入的郵箱格式不正確') $('#email').next().show(); error_check_password = true; } }; //在里面return false;會取消提交表單， return true或者不返還，會提交表單，監聽form的submit事件，若函數返回false，表單不提交 $('#regis_form').submit(function() { check_user_name(); check_pwd(); check_cpwd(); check_email(); if(error_name == false && error_password == false && error_check_password == false && error_email == false && error_check == false) { return true; } else { return false; } }); }) ~~~ * 頁面 ~~~ {% extends 'base_foot.html' %} {% block head %} <script type="text/javascript" src="/static/js/register.js"></script> {% endblock head %} //填充body {% block body %} <div class="register_con"> <div class="l_con fl"> <a class="reg_logo"><img src="/static/images/logo02.png"></a> <div class="reg_slogan">足不出戶 · 新鮮每一天</div> <div class="reg_banner"></div> </div> <div class="r_con fr"> <div class="reg_title clearfix"> <h1>用戶注冊</h1> <a href="#">登錄</a> </div> <div class="reg_form clearfix"> <form id="regis_form" action="/user/register_handle/" method="post"> {%csrf_token%} <ul> <li> <label>用戶名:</label> <input type="text" name="user_name" id="user_name"> <span class="error_tip">提示信息</span> </li> <li> <label>密碼:</label> <input type="password" name="pwd" id="pwd"> <span class="error_tip">提示信息</span> </li> <li> <label>確認密碼:</label> <input type="password" name="cpwd" id="cpwd"> <span class="error_tip">提示信息</span> </li> <li> <label>郵箱:</label> <input type="text" name="email" id="email"> <span class="error_tip">提示信息</span> </li> <li class="agreement"> <input type="checkbox" name="allow" id="allow" checked="checked"> <label>同意”天天生鮮用戶使用協議“</label> <span class="error_tip2">提示信息</span> </li> <li class="reg_sub"> <input type="submit" value="注冊" id="reg_sub" > </li> </ul> </form> </div> </div> </div> <div class="footer no-mp"> <div class="foot_link"> <a href="#">關于我們</a> <span>|</span> <a href="#">聯系我們</a> <span>|</span> <a href="#">招聘人才</a> <span>|</span> <a href="#">友情鏈接</a> </div> <p>CopyRight ? 2016 北京天天生鮮信息技術有限公司 All Rights Reserved</p> <p>電話：010-****888 京ICP備*******8號</p> </div> {% endblock body %} ~~~ ### 1.4 ajax只能請求同一個域下的數據或資源，有時候需要跨域請求數據，就需要用到jsonp技術，jsonp可以跨域請求數據，它的原理主要是利用了script標簽可以跨域鏈接資源的特性。 jsonp的原理如下： ~~~ <script type="text/javascript"> function aa(dat){ alert(dat.name); } </script> <script type="text/javascript" src="....../js/data.js"></script> ~~~ 頁面上定義一個函數，引用一個外部js文件，外部js文件的地址可以是不同域的地址，外部js文件的內容如下： aa({"name":"tom","age":18}); 外部js文件調用頁面上定義的函數，通過參數把數據傳進去。 ## 2. 方法 ### 2.1 siblings 獲取同胞標簽 siblings() 獲得匹配集合中每個元素的同胞（同胞指同一個父節點下的所有同級標簽），通過選擇器進行篩選是可選的。 ~~~ <div class="fr"> <div class="login_info fl"> 歡迎您：<em>張山</em> </div> <div class="login_btn fl"> <a href="login.html">登錄</a> <span>|</span> <a href="register.html" id="zhuce">注冊</a> </div> <div class="user_link fl"> <span>|</span> <a href="user_center_info.html">用戶中心</a> <span>|</span> <a href="cart.html">我的購物車</a> <span>|</span> <a href="user_center_order.html">我的訂單</a> </div> ~~~ $('#zhuce').siblings('span').hide(); 獲得和id是zhuce同胞的所有span標簽 ~~~ <script> $(function () { $('#zhuce').hide(); $('#zhuce').siblings('span').hide(); }) </script> ~~~ 其中為一包標簽 ~~~ <div class="login_btn fl"> <a href="login.html">登錄</a> <span>|</span> <a href="register.html" id="zhuce">注冊</a> </div> ~~~ 在` <div class="login_btn fl">` 標簽下，這幾個同胞。 ~~~ <a href="login.html">登錄</a> <span>|</span> <a href="register.html" id="zhuce">注冊</a> ~~~ ## 3. 本地存儲 > 本地存儲有三種： >* cookie > 1. cookie 存儲在本地 > 2. 容量最大4k > 3. 在同源的http請求時攜帶傳遞，損耗帶寬，可設置訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，在設置的過期時間之前有效。 > 4. 需要引入jquery.cookie.js和jquery-3.2.1.js ~~~ <script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js"></script> <script type="text/javascript"> $.cookie('mycookie','tuna',{expire:7,path:'/'}); alert($.cookie('mycookie')); </script> ~~~ expire:7天過期 path:'/' 存儲路徑 > * localStora > 1. localStorage 存儲在本地，容量為5M或者更大 > 2. 不會在請求時候攜帶傳遞，在所有同源窗口中共享，數據一直有效，除非人為刪除，可作為長期數據 > 3. h5源生自帶 > * sessionStorage > 1. localStorage 存儲在本地，容量為5M或者更大 > 2. 不會在請求時候攜帶傳遞，在同源的當前窗口關閉前有效。 > 3. h5源生自帶 ~~~ <script type="text/javascript"> localStorage.setItem('localStorage','localstorage_tuna'); sessionStorage.setItem('sessionStorage','sessionStorage_tuna') alert(localStorage.localStorage); alert(sessionStorage.sessionStorage); </script> ~~~ 在關閉瀏覽器后并去掉 ~~~ localStorage.setItem('localStorage','localstorage_tuna'); sessionStorage.setItem('sessionStorage','sessionStorage_tuna') ~~~ 之后，不在存值，此時localstorage的值繼續存在，session的已經消失，alert出undefined > * localStorage 和 sessionStorage 合稱為Web Storage , Web Storage支持事件通知機制，可以將數據更新的通知監聽者，Web Storage的api接口使用更方便。 > * iPhone的無痕瀏覽不支持Web Storage，只能用cookie。