js笔记

例一、删除元素的所有子元素

1.var elem =getElementById("elem_id");

elem.innerHtml = "";

innerHtml属性和innerText属性的区别

 

2.while(elem.hasChildNode()){

             elem.removeChild(elem.firstChild);

}

 

3.while(elem.lastChild){

             elem.removeChild(elem.lastChild);

}

 

4. var childs = elem.childNodes;

for(var i = childs.length-1;i>=0;i--){

             elem.removeChild(childs.item(i));

}

 

5.$("#elem_id").empty();

 

XMLHttpRequest Level2添加一个新的借口FormData。利用FormData对象，我们可以通过Javascript用一些键值对来模拟一系列表单控件，还可以使用send()方法来异步的提交这个表单，可以异步上传一个二进制文件。

 

 

得到一个FormData对象

var formData = new FormData();

w3c有三种方案来获取或者修改FormData

1.创建一个FormData对象，然后再用append方法逐个添加键值对

 

2.取得元素对象，作为参数传进对象的构造函数中

var formObj  = document.getElementById("form");

var formData = new FormData(formObj);

3.或者

var formData = formObj.getFormData();

 

FormData会自动将不是File类型的、Blob类型的和字符串类型的其他类型自动转成字符串

name属性是key value就是value了

filename属性的一个当Blob和File类型传回服务器时所带的一个字符串参数

 

formData.append("username","bob");

formData.append("username","Mary");

formData.get("username");//bob

formData.getAll("username");//["bob","Mary"]

formData.has(username);

formData.set(name,value);

formData.set(name, value, filename);

 

ajax form表单异步上传

HTML

<form id="form_id" enctype="multipart/form-data">

            <input type="file" name="file" id="file"/>

            <input type="button" value=>

</form>

enctype="multipart/form-data"---------------------

1.enctype的默认值是application/x-www-form-urlencoded,将表单中的数据变为键值对的形式

如果action为get，则将表单数据编码为(name1=value1&name2=value2…)，然后把这个字符串加到url后面，中间用?分隔

如果action为post，浏览器把form数据封装到http body中，然后发送到服务器。

2.text/plain 表单以纯文本形式进行编码

3.如果上传非文本文件，就要设置成 multipart/form-data 使用request无法直接获取到表单的值

 

JAVASCRIPT

$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,//上传文件不需要缓存
    data: new FormData($('#uploadForm')[0]),
    processData: false,//对象是FormData，不需要对数据进行处理

    //该处使用false是为了避免$.ajax()对contentType进行操作而影响到原来的contentType的类型，使得后台不能正常解析文件
    contentType: false,

    success:function(data){}

    error:function(){}

});

ajax success只有在status=200才执行其中的function

 

第二种方式（可以上传多个文件）

<div id="upload_form">

       <input id="file" name="file" type="file"/>

       <input type="button" value="Upload"/>

</div>

JAVASCRIPT

<script type="text/javascript">

var formData = new FormData();

formData.append("file,"$("#file")[0].files[0]);

$.ajax({

    url;"xxx.html",

    type:"post",

    cache:false,

    data:formData,

    contentType:false,//上传文件一般都将contentType设置为false

    processData:false,

    success:function(data){},

    error:function(data){}

});

</script>

$.ajax({

}).done(function(data){

}).fail(function(data){

}).always(function(data){

});

当然<input type="file" multiple="multiple"/>可以上传多个文件，可以通过$("#file")[0].files[index]进行获取

后台

servlet3.0可以通过request.getPart()或request.getParts()两个进行获取文件