formdata传递参数_FormData实现数据传递

1.ajax收集表单数据，存入数据库

2.​ajax实现附件上传功能

3.实现上传图片的立即显示

4.上传大附件，进度条显示​

【ajax收集表单数据】​

submit型

表单提交

普通表单提交，而且会触发f1()函数

function f1(){

//利用dom技术可以收集​表单信息

var

name=document.getElementByIdx_x('username').value;​

var

pwd=document.getElementByIdx_x('userpwd').value;​​

var

email=document.getElementByIdx_x('useremail').value;​

var

data_str="name="+name+"&pwd="+pwd+"&email="+email;​

var xhr=new

XMLHttpRequest();

xhr.open('post','/03.php);

xhr.setRequestHead​er("Content-type","application/x-www-form-urlencode");

xhr.send(data_str);​

​

}​

【有意思的内容】

//​利用高级来处理(html5新标准，IE浏览器不支持)表单

表单中的id为reg

​

​var

reg=document.getElementByIdx_x('reg');

//制作一个form数据对象FormData()

//制作一个Forndata表单数据对象,里面存放form表单​

var fd=new

FormData(reg);​

var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function​(){

if(xhr.readState==4

&&xhr.states==200){

alert(xhr.responseText);

}​

}

xhr.open('post','/03.php);

//给服务器传递了一个form数据对象​

//ajax接收数据是post方式​

xhr.send(fd);​​

2.如果没有form元素，还是否可以通过formdata给服务器传递数据

没有form元素节点对象

var fd=new ​ FormData;

var

name=document.getElementByIdx_x('username').value;​

var email="line@163.com";

var pwd="123456";​

//把以上数据填充到fd对象里边

fd.append('name',name);​

fd.append('email',email);

fd.append('pwd',pwd);​

​

var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function​(){

if(xhr.readState==4

&&xhr.states==200){

alert(xhr.responseText);

}

}

xhr.open('post','/03.php);

//ajax接收数据是post方式​

xhr.send(fd);​

​

​3.通过FormData给服务器传递数据

a)  通过form元素节点对象实现

b)通过formData的方法append()实现数据整合​