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 相关文章推荐
模仿OSO的论坛(一)
Oct 09 PHP
php中全局变量global的使用演示代码
May 18 PHP
php动态实现表格跨行跨列实现代码
Nov 06 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
Jul 02 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
Oct 10 PHP
PHP使用json_encode函数时不转义中文的解决方法
Nov 12 PHP
PHP实现扎金花游戏之大小比赛的方法
Mar 10 PHP
PHP实现打包zip并下载功能
Jun 12 PHP
python进程与线程小结实例分析
Nov 11 PHP
php模式设计之观察者模式应用实例分析
Sep 25 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
Oct 16 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
Feb 27 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
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
python中的装饰器详解
2015/04/13 Python
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
python用requests实现http请求代码实例
2019/10/31 Python
python已协程方式处理任务实现过程
2019/12/27 Python
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
法学毕业生自荐信
2013/11/13 职场文书
银行职业规划书范文
2013/12/28 职场文书
开学典礼决心书
2014/03/11 职场文书
法律进机关实施方案
2014/03/12 职场文书
委托书范本
2014/04/02 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle