向服务器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>