formdata对象作用:可以将表单对象作为参数传递到服务器端,还可以传递二进制数据格式文件,
用formdata对象传递表单,需要将表单转换为formdata对象:new FormData(form),然后可以将这个对象放在send()中进行提交,也正是这样,不能用get方法传递,而使用post方法传递;(因为get方法再url中传递参数)代码如下,写的不好的地方还请大家见谅:
<body>
<!-- 创建普通html表单 -->
<form id="form">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
var form = document.getElementById('form');
var btn =document.getElementById('btn');
btn.onclick = function() {
// 将普通html表单转换成表单对象
var formData = new FormData(form); //formData() 只能放在send()中,所以下面是post方法
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 配置对象
xhr.open('post','http://localhost:3000/formData');
// 发送ajax请求
xhr.send(formData);
// 监听onload事件
xhr.onload = function() {
// 判断http状态码
if(xhr.status == 200) {
console.log(xhr.responseText);
}
}
}
</script>
</body>