FormData 表单数据对象,这是在HTML5中新增的一个API,他能以表单对象做参数,自动的将表单的数据打包,当ajax发送数据是,发送FormData内的表单数据给后端即可

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
function fd(){
var fdate = document.getElementById('fdate');
var fd = new FormData(fdate);
var xhr = new XMLHttpRequest();
xhr.open('post','10.php',true);
xhr.send(fd);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
document.getElementById('desc').innerHTML = this.responseText;
}
} }
</script>
<body>
<form id="fdate" >
user:<input type="text" name="user"> <br><br>
age:<input type="text" name="age"> <br><br>
sex:<input type="text" name="sex"> <br><br>
QQ:<input type="text" name="QQ"> <br><br>
<input type="button" value="Go" onclick="fd();">
</form>
<p id="desc"></p>
</body>
</html>

效果如下所示:

这样比传统的拼接方法简单多了,当然他还有另外一种用法,如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
function fd(){
var fdate = document.getElementById('fdate');
var fd = new FormData(fdate);
var fd2 = new FormData();
var xhr = new XMLHttpRequest();
xhr.open('post','10.php',true);
//xhr.send(fd);
fd2.append('user','leigood');
fd2.append('age','18');
xhr.send(fd2);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
document.getElementById('desc').innerHTML = this.responseText;
}
} }
</script>
<body>
<form id="fdate" >
user:<input type="text" name="user"> <br><br>
age:<input type="text" name="age"> <br><br>
sex:<input type="text" name="sex"> <br><br>
QQ:<input type="text" name="QQ"> <br><br>
<input type="button" value="Go" onclick="fd();">
</form>
<p id="desc"></p>
</body>
</html>

效果如下所示:

AJAX-----13HTML5中新增的API---FormData的更多相关文章

  1. 第30月第11天 Xcode 9.0中新增的API版本检查@available

    1.Xcode 9.0中新增的API版本检查@available https://www.jianshu.com/p/0a94baa6c3dd https://www.jianshu.com/p/b8 ...

  2. ASP.NET MVC4中调用WEB API的四个方法

    http://tech.it168.com/a2012/0606/1357/000001357231_all.shtml [IT168技术]当今的软件开发中,设计软件的服务并将其通过网络对外发布,让各 ...

  3. jquery ajax 请求中多出现一次OPTIONS请求及其解决办法

    http://www.tangshuang.net/2271.html 在上一篇<服务端php解决jquery ajax跨域请求restful api问题及实践>中,我简单介绍了如何通过服 ...

  4. Django使用AJAX调用自己写的API接口

    Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...

  5. jQuery.ajax()方法中參数具体解析

    前言 在项目开发中,为了实现异步向服务端发起请求,最常常使用的就是jQuery.ajax方法了.刚開始需求比較简单,调用jQuery.ajax方法时要传的參数也就那几个常见的參数:url/data/d ...

  6. .NET和.NET Core Web APi FormData多文件上传对比

    前言 最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...

  7. $.ajax 跨域请求 Web Api

    WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...

  8. 以短链服务为例,探讨免AppKey、免认证、Ajax跨域调用新浪微博API

    新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...

  9. ionic 运行过程中动态切换API服务器地址

    ionic 运行过程中动态切换API服务器地址 keywords: ionic,phonegap,cordova,网络制式,动态切换,变更,API,服务器地址,$resource,localstora ...

随机推荐

  1. CentOS上安装RabbitMQ3.6.X

    RabbitMQ3.6.1的安装方法跟以前的版本有点不一样,我在网上找了很多资料,基本都是3.1左右的版本,而且安装过程很繁琐,所以我花了一下午 的时间研究如何实现最简安装.为了让大家少走弯路,就把安 ...

  2. Eqs

    Eqs 题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=15029 题意: 给出系数a1,a2,a3,a4,a5,求出 ...

  3. HighchartsJS创建点状带标识的图表实例

    上一篇我发布的是关于 HighchartsJS创建环形带标识的图表实例, 从那篇文章就可以看出 HighchartsJS 确实是一款功能很强大的图表库.利用它,我们可以在项目中创建出我们所需要的图表来 ...

  4. linux下转换U盘文件系统

    打算在windows 7 下复制一个12G 的文件至U盘,无奈U盘为FAT32格式,最大支持移动4G 的文件,只能将U盘文件系统格式化为NTFS.windows 7系统出现问题,转化中总是出现错误.故 ...

  5. 使用C#向ACCESS中插入数据(仅供参考)

    1.创建并打开一个OleDbConnection对象 string strConn = " Provider = Microsoft.Jet.OLEDB.4.0 ; Data Source ...

  6. org.hibernate.hql.ast.QuerySyntaxException: XXX is not mapped

    因为 String sql2 = "select s from Student s where s.clazz.name=:name"; 此处的 Student 应该为类名.hql ...

  7. 安装redis,执行make test时遇到You need tcl 8.5 or newer in order to run the Redis test

    安装他yum install tcl

  8. 比较数据泵和exp/imp对相同数据导出/导入的性能差异

    1环境准备 2演示exp/imp方式效率 3演示数据泵方式效率

  9. sql语句的各种模糊查询

    一般模糊语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1.%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况 ...

  10. BizTalk开发系列(二十七) 异常管理中的数据编码

    在BizTalk的异常管理解决方案中.大部分是通过订阅相关的升级属性来接收消息,并在自定义的流程或发送端口进行处理.但不管怎样,一般会定义统一的 错误消息Schema,这样不仅可以让我们通过异常信息快 ...