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 相关文章推荐
一个可查询所有表的“通用”查询分页类
Oct 09 PHP
使用网络地址转换实现多服务器负载均衡
Oct 09 PHP
windows xp下安装pear
Dec 02 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
Jun 15 PHP
ecshop 批量上传(加入自定义属性)
Mar 20 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
Jul 22 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
Dec 25 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
Jun 05 PHP
Laravel框架数据库CURD操作、连贯操作总结
Sep 03 PHP
php中heredoc与nowdoc介绍
Dec 25 PHP
php验证邮箱和ip地址最简单方法汇总
Oct 30 PHP
Laravel框架Eloquent ORM删除数据操作示例
Dec 03 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程序员应该掌握哪些技术?
2016/09/23 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
轮播图组件js代码
2016/08/08 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
如何高效使用Python字典的方法详解
2017/08/31 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python 一句话生成字母表的方法
2019/01/02 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python的range和linspace使用详解
2019/11/27 Python
利用python汇总统计多张Excel
2020/09/22 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
介绍一下Java的事务处理
2012/12/07 面试题
尊师重教演讲稿
2014/09/04 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
药店采购员岗位职责
2014/09/30 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
力克胡哲观后感
2015/06/10 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
Redis实战高并发之扣减库存项目
2022/04/14 Redis