项目三遇到的知识点总结

一、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='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;
	}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/DCL1314/p/9664282.html