您的位置：首页 > 其它

项目三遇到的知识点总结

2018-09-17 19:14 330 查看

一、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
.name + " " + packJson[p].password);

}
</script>
[p]
或者

<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
)
}
</script>

三、html引入公共的头部和底部

[p]
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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航