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. 使用plsql创建用户并授权(图形化界面)

    使用sys用户登录数据库(或者有dba权限的[还不知道具体的区别,但是能用]) 在左边的对象列表中找到USERS,右键点击USERS,选择“新建用户”选项 其他安装下面的图片步骤来即可: OK!

  2. Javascript 异步编程的4种方法

    你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排 ...

  3. Node.js在Windows与Linux下的安装

    一.Windows配置 (1)官网(http://nodejs.org)选择Node.js的Windows系统(32位和64位)最新版本. (2)下载完成后,执行MSI的安装文件. (3)安装完成,查 ...

  4. Jquery用法

    $this.closest("dd").addClass("selected").siblings().removeClass("selected&q ...

  5. hdu Farm Irrigation

    这题第一感觉是用搜索做,暴力就可以解决,这里将水管转换成一个个3*3的矩阵,然后搜素就可以了.写完之后确实一遍过掉了,31ms.附上代码: #include"iostream" # ...

  6. Emule Xtreme Kid eD2K 设置

    设置udp和tcp端口: 测试结果必须为通过,若不通过, 1.请将主机ip丢入路由器DMZ区(设置将以上端口与本机ip地址绑定) 2.在windows防火墙中加入以上端口允许通行项 测试结果: 其它一 ...

  7. java项目开发的一些准备工作

    做项目有一段时间了,每次接手一个新项目都要在开发前做些准备工作,方便开发. 有些东西在配置的时候经常会忘记,所有整理一份,方便以后查阅! 1.安装JDK及搭建环境,安装tomcat及搭建环境,这些一般 ...

  8. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  9. 解决安装sql server 需要重启问题

    解决办法: 一.在SQL服务器的安装盘中找到MSDE这个目录,并且点击setup.exe安装它. 二.安装完毕后,重启系统WINDOWSXP,这下就可以看到SQL服务的图标出现了. 三.再直接安装根目 ...

  10. css属性编写顺序+mysql基本操作+html细节（个人笔记）

    css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...