html5使用FormData异步传输数据

Posted 2023-05-01

用formdata向servlet 传表单数据，用什么方法接收数据？
var form=document.getElementById("form1");
var formData=new FormData(form);
var xhr=new XMLHttpRequest();
xhr.open('GET', 'servlet/test',true);
xhr.onload=function(e)
if(this.status==200)
document.getElementById("result").innerHTML=this.response;

;
xhr.send(formData);

参考技术A $.get(url,func()......);

FormData对象

参考技术A 1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式

2.异步上传二进制文件

1.准备HTML表单，表单中需要提交数据的表单控件必须添加name属性

2.将HTML表单转化为FormData对象，通过

3.提交表单对象

具体操作

①获取到提交表单的按钮并且给按钮添加点击事件，一旦点击就发送请求

②生成formData实例，将获取到的表单元素作为参数

③创建Ajax对象

④配置请求的方式以及地址

⑤将表单实例作为请求参数发送出去

⑥监听onload事件，当响应状态码为200时，说明请求成功，将结果打印出来即可

①formData. get ( 'key' )------用来获取表单对象的属性值，也就是输入框输入的值，key是表单的name所对应的名字

②formData. set ( 'key' ,'value')------用来设置表单对象属性的值，如果设置的表单属性存在就会覆盖原有的值，如果不存在就会创建这个属性

③formData. delete ( 'key' )-------删除表单对象的属性值

④formData. append ( 'key' ,'value')------向表单对象中添加值，如果属性已存在，那么会保留新旧两个属性及值，但是打印的话，后面添加的会覆盖前面的

①upload事件在上传文件的过程中持续触发，它又有一个onprogress方法

②已经上传的文件大小/文件的总大小*100+'%'--------> loaded (已经上传的文件大小）/ total （文件总大小）*100+'%'

③设置一个变量用来接收进度条的值，之后将值赋值给HYML样式即可