辽宁省建设厅特种工查询网站,网店建设方案,十大经典广告营销案例,国外服务器购买平台//FormData对象是XMLHTTPRequest level2新增的类型#xff0c;它可以自动序列化表单内容#xff0c;不再需要我们去写序列化表单方法#xff1b; FormData()即可以直接把整个表单给它#xff0c;也可以分别使用append(‘字段’,‘值’)方法给FormData()#xff1b; 现在就…//FormData对象是XMLHTTPRequest level2新增的类型它可以自动序列化表单内容不再需要我们去写序列化表单方法 FormData()即可以直接把整个表单给它也可以分别使用append(‘字段’,‘值’)方法给FormData() 现在就结合xhr写一个简单示例怎么把表单传递给后端
htmlheadmeta http-equivcontent-type contenttext/html;charsetUTF-8/title测试xhr和formdata/title/headbodydiv idregformform idregniter namereg methodpost actionlabeldiv classinputStyle用户名input typetext nameusername value//div/labellabeldiv classinputStyle密emsp;码input typepassword namepwd value//div /labellabeldiv classinputStyleinput typebutton namesubmit1 value提交//div/label/form/divscriptlet btndocument.getElementsByName(submit1);btn[0].addEventListener(click,function(){let xhrnew XMLHttpRequest();xhr.onreadystatechangefunction(){if(xhr.readyState4){try{if((xhr.status200 xhr.status300) || xhr.status304){//获取从后端返回的数据let dataarrJSON.parse(xhr.response);console.log(dataarr);}else{console.log(连接后端不成功,xhr.status);}}catch(ex){xhr.ontimeoutfunction(){alert(连接超时);};}}};xhr.open(post,regniter.php);let form1document.forms[0];let usernameform1.elements[username].value;let pwdform1.elements[pwd].value;//设置超时为5秒xhr.timeout5000;//设置重写xhr响应的mime类型这里是json类型也可以写成application/json形式xhr.overrideMimeType(text/json);if(username! pwd!){let datanew FormData(form1);xhr.send(data);/*这里是单独设置字段/值,效果和上面是一样的data.append(username)username;data.append(pwd)pwd;xhr.send(data);*/form1.elements[submit1].disabledtrue;console.log(已经发送);}})/script/body
/html//这里是后端处理
if(isset($_POST[username])isset($_POST[pwd]))
{$regArr[];$regArr[username]$_POST[username];$regArr[pwd]$_POST[pwd];//注意这里不能用return,即使是文本也不能用return,不然前端收到是空白 echo json_encode($regArr);
}else
{echo no;
}
