PHP使用HTML5 FormData对象提交表单操作示例


Posted in PHP onJuly 02, 2019

本文实例讲述了PHP使用HTML5 FormData对象提交表单操作。分享给大家供大家参考,具体如下:

这是HTML5中新增的一个Api,他能以表单对象作为参数,自动的把表单的数据打包,当ajax发送数据时,发送这个FormData对象,以达到发送表单数据的目的。

创建:

参数是一个form节点对象

var fm = document.getElementById('formid');
var fd = new FormData(fm);

优点:

(1)在以往的ajax做post请求时,当提交的数据比较多时,需要拼接请求的字符串,如:k1=v1&k2=v2...,使用FormData对象时不需要这样,可以节省工作量,也防止人为拼写错误。

(2)FormData对象不仅可以读取表单的数据,也可以自行追加数据

fd.append(name,value);

案例:

提交表单

效果图:

PHP使用HTML5 FormData对象提交表单操作示例

文件结构图:

PHP使用HTML5 FormData对象提交表单操作示例

10-formdata.html文件:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>FormData使用</title>
  <link rel="stylesheet" href="">
</head>
<script>
  /**
   * FromData:表单数据对象
   * 这是HTML5中新增的一个Api
   * 他能以表单对象作为参数,自动的把表单的数据打包
   * 当ajax发送数据时,发送这个formData
   * 达到发送表单内数据的目的
   */
  function send(){
    var fm = document.getElementById('tform');
    var fd = new FormData(fm);//创建FormData对象
    var xhr = new XMLHttpRequest();//创建xhr对象
    xhr.open('POST','10-formdata.php',true);//配置请求参数
    //设置状态回调函数
    xhr.onreadystatechange = function (){
      if(this.readyState == 4 && this.status == 200){
        document.getElementById('debug').innerHTML = this.responseText;
      }
    }
    //说明formdata对象不仅可以读取表单的数据,也可以自行追加数据
    fd.append('Single',false);
    xhr.send(fd);//发送请求
  }
</script>
<body>
  <form id="tform">
    用户名:<input type="text" name="username"/><br/>
    年龄:<input type="text" name="age"/><br/>
    邮箱:<input type="text" name="email"/><br/>
    性别:<input type="text" name="sex"/><br/>
    <input type="button" value="ajax发送" onclick="send();"/>
  </form>
  <div id="debug"></div>
</body>
</html>

10-formdata.php文件:

<?php
/**
 * 使用formData提交表单
 * @author webbc
 */
print_r($_POST);
?>

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
用PHP实现的随机广告显示代码
Jun 14 PHP
MayFish PHP的MVC架构的开发框架
Aug 13 PHP
解析thinkphp中的导入文件标签
Jun 20 PHP
PHP实现读取一个1G的文件大小
Aug 24 PHP
linux下编译安装memcached服务
Aug 03 PHP
PHP使用NuSOAP调用Web服务的方法
Jul 18 PHP
PHP中Http协议post请求参数
Nov 02 PHP
Yii2实现ajax上传图片插件用法
Apr 28 PHP
zend framework重定向方法小结
May 28 PHP
php array_key_exists() 与 isset() 的区别
Oct 24 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
Nov 08 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
Dec 04 PHP
PHP实现带进度条的Ajax文件上传功能示例
Jul 02 #PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
Jul 01 #PHP
PHP大文件切割上传并带进度条功能示例
Jul 01 #PHP
PHP大文件切割上传功能实例分析
Jul 01 #PHP
PHP使用反向Ajax技术实现在线客服系统详解
Jul 01 #PHP
PHP封装cURL工具类与应用示例
Jul 01 #PHP
PHP session垃圾回收机制实例分析
Jun 28 #PHP
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php修改文件上传限制方法汇总
2015/04/07 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
让您的菜单不离网站
2006/10/03 Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python实现中一次读取多个值的方法
2018/04/22 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python实现图片批量压缩程序
2018/07/23 Python
Python生成器generator用法示例
2018/08/10 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
python实现按行分割文件
2019/07/22 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
股票投资建议书
2014/05/19 职场文书
临床专业自荐信
2014/06/22 职场文书
房屋出售授权委托书
2014/10/12 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python