前端页面:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>formdata对象封装表单数据</title>
<script type="text/javaScript"> function send(){
var xhr=new XMLHttpRequest();
xhr.open('POST','./01.php',true);//异步传输
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var fm=document.getElementsByTagName('form')[0];
var fd=new FormData(fm);
xhr.onreadystatechange=function(){
if(this.readyState==4){
document.getElementById('username').innerHTML=xhr.responseText;
}
}
fd.append('act','zhuce');
xhr.send(fd); }
</script>
</head>
<body>
<form action="./01.php" method="post">
<p>用户名:<input type="text" name="username"/><span id="username"></span></p>
<p>密码:<input type="password" name="pwd"/></p>
<p>邮箱地址:<input type="text" name="eamil"/></p>
<input type="button" value="注册" onclick="send()">
</form>
</body>
</html>

php接收页面

<?php
print_r($_POST);
$name=Array('test111','admin','Admin');
if(isset($_POST)){
if(in_array($_POST['username'],$name)){
echo '用户名已经注册';
}else{
echo '可以注册';
}
}
?>

出现以下错误

解决办法

将XMLHTTPRequest对象设置的头信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
删掉或注释就可以了

Ajax发送FormData对象封装的表单数据的更多相关文章

  1. Ajax 使用formdata 实现 无刷新表单上传

    FormData对象的作用就类似于这里的serialize()方法,不过FormData是浏览器原生的,且支持二进制文件 1.这里实现一个无刷新上传图片,成功后页面显示 点击button 触发隐藏的 ...

  2. ajax使用formdata 提交excel文件表单到rails解析

    .modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...

  3. JavaScript实现ajax发送表单数据

    知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...

  4. 【ASP.NET Web API教程】5.2 发送HTML表单数据:URL编码的表单数据

    原文:[ASP.NET Web API教程]5.2 发送HTML表单数据:URL编码的表单数据 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内 ...

  5. .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

    前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...

  6. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  7. 通过jQuery Ajax使用FormData对象上传文件 (转载)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  8. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  9. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

随机推荐

  1. BestCoder Round #70 Jam's math problem(hdu 5615)

    Problem Description Jam has a math problem. He just learned factorization. He is trying to factorize ...

  2. hdu 5745 La Vie en rose DP + bitset优化

    http://acm.hdu.edu.cn/showproblem.php?pid=5745 这题好劲爆啊.dp容易想,但是要bitset优化,就想不到了. 先放一个tle的dp.复杂度O(n * m ...

  3. static关键字修饰类

    今天继续研究公司的新项目,据说是京东的架构,研究看了一番,果然很牛逼,大致是Maven+spingmvc+spring+mybatis+ehcache+velocity来搭建的,数据库用的是mysql ...

  4. Android ViewPager使用具体解释

    这是谷歌官方给我们提供的一个兼容低版本号安卓设备的软件包,里面包囊了仅仅有在安卓3.0以上能够使用的api.而viewpager就是当中之中的一个利用它,我们能够做非常多事情,从最简单的导航,到页面菜 ...

  5. Mac下生成RSA密钥

    MAC OS自带了OpenSSL,直接在命令行里使用OPENSSL就可以. 打开命令行工具,然后输入 openssl打开openssl,接着只要三句命令就可以搞定. 第一句命令生成1024位私钥: O ...

  6. [Javascript] Maybe Functor

    In normal Javascript, we do undefine check or null check: , name: "Suvi"}; var name = pers ...

  7. hive-0.10.0-cdh4.3.0安装

    1.我使用的Hadoop2.0-cdh4.3.0,相应hive配套版本号hive-0.10.0-cdh4.3.0.    2.改动hive/conf下hive-site.xml文件,无则创建hive- ...

  8. iOS 2D绘图详解(Quartz 2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)

    前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...

  9. Java中for循环以及循环中标签

    1.第一种,通过迭代的方式 File[] listFiles = file.listFiles(); for (Iterator iterator = files.iterator(); iterat ...

  10. iOS开发——UI篇&下拉弹出列表选择项效果

    下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod  ...