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。