项目三遇到的知识点总结
一、jQuery ajax 使用formdata对象上传单个图片
- 上传图片并没有做出预览的效果
1、HTML
<input id="file" type="file" name="file" accept="image/*" />
<button id="upload" type="button">上传</button>
2、js
-
引入jq
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var files = document.getElementById('file').files[0]; var data = new FormData(); data.append('file',files); $('#upload').click(function(){ $.ajax({ type: 'POST', url: '地址', dataType: 'json', data: data, //cache: false, processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data contentType: false, success:function(res){ }, error:function(err){ } }) }) </script>
3、注意
- processData设置为false.因为data值是FormData对象，不需要对数据做处理。
- cache设置为false,上传文件不需要缓存。
- 默认值为contentType = "application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。
- 浅谈contentType = false,原文地址 https://segmentfault.com/a/1190000007207128
二、jQuery对json的各种遍历方法
1、概述
- JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不须要任何的API或工具包
在JSON中，有两种结构:对象和数组。
1.对象
-
一个对象以
{开始，}结束。每个'key'后跟:,"key/value对"之间用,分割。json = {'name': '李木子','password': '123456'}
2.数组
-
数组是值得有序集合。一个数组以
[开始，]结束。值之间用,分隔。json = [{'name': '李木子','password': '123456'},{'name': '张长弓','password':'654321'}]
2、JSON对象和JSON字符串的转换
- 在数据传输流程中，json是以文本，即字符串的形式传递的，而js操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换时关键
JSON字符串
var jsonStr = "{'name': '李木子','password': '123456'}";
JSON对象
var jsonObj = {'name': '李木子','password': '123456'};
1.String转换为JSON对象
-
1.Javascript支持的转换方式
var jsonObj = eval('(' + jsonStr + ')'); -
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。
-
2.jQuery插件支持的转换方式
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 -
3.浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器
JSON.parse(jsonStr); -
注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。
2.Json对象转换为String字符串
JSON.stringify(jsonobj)
3、jQuery遍历json对象
1.grep
-
$.grep()函数使用指定的函数过滤数组中的元素，并返回过滤后的数组
var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }) for(var i = 0;i<filterarray.length;i++){ console.log(filterarray[i]) }//和下面函数效果相同 for(key in filterarray){ console.log(filterarray[key]) }
2.each
each 有两种用法：
1.第一种$.each(object,callback)
- $.each(object,callback);
- object可以是数组，js对象，dom对象，json对象
2.第二种$(selector).each(callback)
-
$(selector).each(callback);
-
callback是回调函数，跳出使用return false;return true和continue的用法一样，但是在each中只能使用return ture;
-
callback的实体就是function(index,element);
-
index：遍历的索引位置，从0开始，如果为json对象或对象属性，则此值为对应的key值或属性；
-
element:遍历得到的对象元素();
<body> <div class="main"> </div> </body> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function() { var obj = [ { name: "迪丽热巴", birthday: "1992-06-03"}, { name: "易烊千玺", birthday: "2000-11-28"}, ]; //下面使用each进行遍历 var html = '' $.each(obj, function (index, value) { html += "<tr><td>" + '爱豆：'+value.name + "</td><td style='width:30px;'>"+''+"</td><td>" + '生日：'+value.birthday + "</td></tr>"; }); $(".main").append(html); }) </script>
``
<script type="text/javascript">
$().ready(function(){
var anObject = {one:1,two:2,three:3};//对象
$.each(anObject,function(name,value) {
alert(name);
alert(value);
});
var anArray = ['one','two','three'];//数组
$.each(anArray,function(n,value){
alert(n);
alert(value);
});
});
</script>
3.inArray
-
返回数组中指定元素的索引值
<script> $().ready(function(){ var anArray = ['one','two','three']; var index = $.inArray('two',anArray); alert(index);//返回该值在数组中的键值，返回1 alert(anArray[index])// two }) </script>
4.map
-
$.map()函数用于使用指定函数处理数组中的每个元素（或对象的每个属性），并将处理结果封装为新的数组返回。
<script> $().ready(function(){ var strings = ['0','1','2','3','4','5','6'] var values = $.map(strings,function(value){ var result = new Number(value); return isNaN(result) ? null:result; }) for (key in values) { alert(values[key]) } }) </script>
3、原生js遍历json对象
遍历json对象：
1. 无规律
<script>
var json = [{迪丽热巴: '女神',易烊千玺: 18,aaa: 'haha'},{ddd: '测试',ccc: '结果'}];
for (var i = 0,l < json.length;i < l; i++){
for(var key in json[i]){
alert(key+':'+json[i][key]);
}
}
</script>
2.有规律
<script>
packJson = [
{"name":"nikita", "password":"1111"},
{"name":"tony", "password":"2222"}
];
for(var p in packJson){//遍历json数组时，这么写p为索引，0,1
alert(packJson[p].name + " " + packJson[p].password);
}
</script>
或者
<script>
for(var i = 0; i < packJson.length; i++){
alert(packJson[i].name + " " + packJson[i].password);
}
</script>
4.遍历json对象
<script>
var obj = {'name': '张长弓','password': '123456','department': '技术部','sex': '男','old': '24'};
for( var p in obj){
console.log(obj[p])
}
</script>
三、html引入公共的头部和底部
index.html
<footer class="footer"></footer>
<script>
$('.footer').load('footer.html',function(responseTxt,statusTxt,xhr){
console.log('responseTxt,statusTxt,xhr')
})
</script>
footer.html
-
footer.html不需要是完整的HTML
<ul class="g-flex">//公共内容 <li class="g-flex-auto"><a href="#" class="i-b">首页</a></li> <li class="g-flex-auto"><a href="#" class="i-b">分类</a></li> <li class="g-flex-auto"><a href="#" class="i-b">订单</a></li> <li class="g-flex-auto"><a href="#" class="i-b">我的</a></li> </ul>
注意
-
$('.footer').load()调用时必须在服务器环境中打开HTML文件才能成功，不能直接双击打开
-
打开后浏览器的路径应该是http://127.0.0.1:8020/index.html，
-
而不是file:///G:/html/index.html这样的路径，否则在大部分的浏览器上都无法使用。
-
在此建议使用HBuilder这款编辑器，在运行时会创建服务器环境，并且在局域网中在别的手机或电脑上预览。
四、jQuery cookie操作
-
下载与引用：jquery.cookie.js基于jquery;先引jquery,再引用jquery.cookie.js;下载 http://plugins.jquery.com/cookie/
<script src='js/jquery-3.3.1.js'></script> <script src='js/jquery.cookie.js'></script>
1.创建一个回话cookie:
$.cookie('cookieName','cookieValue');
- 注：当没有指明cookie时间时，所创建的cookie有效期默认到用户浏览器关闭为止，故被称为会话cookie。
2.创建一个持久cookie:
$.cookie('cookieName','cookieValue',{expires:7});
- 注：当指明时间时，故称为持久cookie，并且有效时间为天。
3.创建一个持久并带有效路径的cookie:
$.cookie('cookieName','cookieValue',{expires：7,path: '/'});
- 注：如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，cookie的路径用于设置能够读取cookie的顶级目录。
4.创建一个持久并带有效路径和域名的cookie：
$.cookie('cookieName','cookieValue',{expires: 7,path: '/',domain: 'chuhoo.com',secure: false,raw: false});
- 注：domain:创建cookie所在网页所拥有的域名;secure:默认是false,如果为true,cookie的传输协议需为https;raw:默认为false，读取和写入时候自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），关闭这个功能，请设置为true。
5.获取cookie：
$.cookie('cookieName');//如果存在则返回cookieValue,否则返回null
-
更改cookie里的属性uid
cookieName.uid = newUid;//newUid新的uid $('cookieName','cookieValue')//更改之后上传新的cookie
6.删除cookie
$.cookie('cookieName',null);
- 注： 如果想删除一个带有效路径的cookie，如:$.cookie('cookieName',null,{path: '/'});
五、封装的获取地址的方法
function getHrefData(href) {
var href = href || window.location.href;
if(href.indexOf("?") == -1) {
return {};
}
var paramStr = href.substring(href.indexOf("?") + 1);
var paramArray = paramStr.split("&");
var reVal = {};
for(var i = 0, len = paramArray.length; i < len; i++) {
var tmp = paramArray[i].split("=");
reVal[tmp[0]] = decodeURI(tmp[1]);
}
return reVal;
}
