利用FormData收集表单数据实现ajax传递post数据

向服务器ajax传入数据可以：1.利用dom获取表单值传入（f1）   2.利用FormData发送传递ajax数据（f2）（没有form表单，这使用append()方法添加数据参考f3）

<form id="reg">
　　用户名:<input type="text" id="username" name="username" /><br />
　　密码:<input type="text" id="userpwd" name="userpwd" /><br />
　　邮箱:<input type="text" id="useremail" name="useremail" /><br />
    <input type="button" value="注册" οnclick="f1()"/>
</form>

<script type="text/javascript">

//ajax收集表单数据
function f1(){
    //利用dom技术可以收集表单信息
    var name = document.getElementById('username').value;
    var pwd = document.getElementById('userpwd').value;
    var email = document.getElementById('useremail').value;
    
    var data_str = "name="+name+"&pwd="+pwd+"&email="+email;
    
    var xhr = new XMLHttpRequest();
    xhr.open('post','./03.php');
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send(data_str);
}

function f2(){
	//①利用高级方法处理form表单(html5新标准，IE浏览器不支持)
	var reg = document.getElementById('reg');
	//②制作一个form数据对象 FormData()
	//制作一个formdata表单数据对象，里边存放form表单的信息
	var fd = new FormData(reg);
	//reg是form元素节点对象
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4 && xhr.status==200){
			alert(xhr.responseText);
		}
	}
	xhr.open('post','./03.php');
	//③ 给服务器传递了一个form数据对象
	//④ ajax打开方式就post方式
	xhr.send(fd);
}

//没有form表单收集数据【3】
function f3(){
    //没有form元素节点对象
    var fd = new FormData();
    var name = document.getElementById('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.readyState==4 && xhr.status==200){
            alert(xhr.responseText);
        }
    }
    xhr.open('post','./03.php');
    xhr.send(fd);}


</script>

　　

转载于:https://www.cnblogs.com/zixueit/p/3850951.html