js中不常用的对象或方法

以下是对最近做的项目的一点小总结:

1.新建一个方法,给方法传递参数,希望参数有默认值,最简单的方法是用"||",例如:

var Utils={
	Ajax:function(param){
		$.ajax({
			url: param['url'],
			type: param['type']||'POST',
			dataType: param['dataType']||'json',
			contentType:param['contentType']||'application/json',
			data: param['data']||'',
			success:param['successFun'],
			error:param['errorFun']||function(){alert("请求出错!")}
		}) 
	}
}

   以上代码,要求在使用此Utils.Ajax方法时必须传入两个参数:url和successFun,其他参数都是可选的,如果不传,则有默认的值。

  

2.substr与substring用法的不同

var str="白日依山尽,黄河入海流。"
console.log(str.substr(1,3));//日依山
console.log(str.substring(1, 3));//日依

   substr和substring都能截取字符串,但两个的用法不同,substr第一个参数是起始位置,第二个参数是截取字符串的个数;substring第一个参数的起始位置,第二个参数的结束位置(顾头不顾尾)。

3.获取图片的url

<body>
	<input type="file"/>
	<button>获取url</button>
</body>
</html>
<script type="text/javascript">
	var getObjectURL=function(file) {
	    var url = null ; 
	    if (window.createObjectURL!=undefined) { // basic
	        url = window.createObjectURL(file) ;
	    } else if (window.URL!=undefined) { // mozilla(firefox)
	        url = window.URL.createObjectURL(file) ;
	    } else if (window.webkitURL!=undefined) { // webkit or chrome
	        url = window.webkitURL.createObjectURL(file) ;
	    }
	    return url ;
	}
	$("button").click(function(){
		console.log($("input")[0].files[0]);
		console.log(getObjectURL($("input")[0].files[0]));
	})
</script>

 打印结果为:

  input type=“file”的元素对象比较特殊,此元素中有个files对象,这个对象的第0个元素中是一个file元素,里面包含了上次的文件的信息。getObjectURL方法是用来建立一个可存取到该file的url。可以通过截取字符串的形式,获得此图片的key值。

4.form元素里有button元素,不管这个button元素是否用来做提交,点击此button都会有默认的一个提交事件

<form>
	<button>点击</button>
</form>

 点击按钮,会发现页面刷新了,且路径上会自动添加"?",说明页面做了get提交。可以通过event.preventDefault()来取消此默认操作。

5.上传图片到七牛,前端代码编写

<form>
	<div class="file-list">
		<div class="list-img">
			<input type="file" class="file" id="file1">		
		</div>
		<div class="list-btn">
			<button class="search-btn">提交</button></br>
		</div>
	</div>
</form>
<script type="text/javascript">
    var formData = new FormData();
    formData.append("items_pic",$(this).parent(".list-btn").prev(".list-img").children("input[type=file]").get(0).files[0]);
    $.ajax({
            url : 'http://localhost:8080/elderly/uploadFiles',
            type : 'POST',
            data : formData,
            async: false,
            cache : false,
            contentType : false,
            processData : false,
            success : function(data) {
                if(data.state==="10000"){
                    alert(data.message);
                    location.href="http://localhost:8080/elderly/nian/index.html";
                }else{
                    alert(data.message);
                }
            },
            error : function(data) {
                alert("提交出错!");
            }
        });
</script>

   FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。多个值,可以多次append。然后把formata对象作为参数传递给后台。

    

posted @ 2017-03-16 10:40  陆漫漫  阅读(505)  评论(0编辑  收藏  举报