Ajax发送FormData对象封装的表单数据
前端页面：
<!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对象封装的表单数据的更多相关文章
- Ajax 使用formdata 实现 无刷新表单上传
FormData对象的作用就类似于这里的serialize()方法,不过FormData是浏览器原生的,且支持二进制文件 1.这里实现一个无刷新上传图片,成功后页面显示 点击button 触发隐藏的 ...
- ajax使用formdata 提交excel文件表单到rails解析
.modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...
- JavaScript实现ajax发送表单数据
知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...
- 【ASP.NET Web API教程】5.2 发送HTML表单数据：URL编码的表单数据
原文:[ASP.NET Web API教程]5.2 发送HTML表单数据:URL编码的表单数据 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内 ...
- .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- 通过jQuery Ajax使用FormData对象上传文件 （转载）
XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...
- [转] 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
随机推荐
- 在 CentOS 上安装和配置 OpenNebula
转自:http://www.aikaiyuan.com/4889.html 我们提到的云计算一般有三种类型:软件即服务(Software as a Service, SaaS),平台即服务(Platf ...
- Unity3D - 关于Dynamic和Static
含有Collider和RigidBody的GameObject, Unity视之为Dynamic 含有Collider的GameObject, Unity视之为Static 如果Static的物体发生 ...
- Date、String、Calendar、Timestamp类型之间的转化
1.Calendar 转化 String Calendar calendat = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDa ...
- 放开Linux内核对用户进程可打开文件数和TCP连接的限制
一. 检查linux内核uname -alsb_release -a 二. 用户进程可打开文件数限制1) vim /etc/security/limits.conf* - nof ...
- Java模拟网站登录02【转载】
如何用Java代码模拟一些如百度.QQ之类的网站登录?有两个方式,一是发送模拟请求,二是模拟浏览器操作,而这两种方式恰好在Java有开源实现,在这里介绍一个工具包,它是家喻户晓的HttpClient. ...
- IOS 常用第三方库
名称 特性 效果图 FXBlurView 实时背景模糊效果 FDFullscreenPopGesture 让UINavigationController在屏幕任何位置均可滑动返回 NJKWebVi ...
- vim中设置Python自动补全
转自:http://blog.csdn.net/wangzhuo_0717/article/details/6942428 在VIM里面增加python的autocomplete功能的做法如下: 1. ...
- 描述cookie,sessionstroage,localstrage的区别
HTML5 提供了两种在客户端存储数据的新方法(Web Storage): localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 ...
- 高级I/O之readn和writen函数
管道.FIFO以及某些设备,特别是终端.网络和STREAMS设备有下列两种性质: (1)一次read操作所返回的数据可能少于所要求的数据,即使还没有达到文件尾端也可能是这样.这不是一个错误,应当继续读 ...
- 架构师书单 2nd Edition--转载
作者:江南白衣,原文出处: http://blog.csdn.net/calvinxiu/archive/2007/03/06/1522032.aspx,转载请保留. 为了2007年的目标,列了下面待 ...