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面向对象的方法重载两种版本比较
Sep 08 PHP
php 广告调用类代码(支持Flash调用)
Aug 11 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
Apr 01 PHP
php与flash as3 socket通信传送文件实现代码
Aug 16 PHP
PHP Streams(流)详细介绍及使用
May 12 PHP
php计算税后工资的方法
Jul 28 PHP
thinkPHP导出csv文件及用表格输出excel的方法
Dec 30 PHP
thinkphp3.x中session方法的用法分析
May 20 PHP
PHP支付系统设计与典型案例分享
Aug 02 PHP
php封装的smarty类完整实例
Oct 19 PHP
laravel 创建命令行命令的图文教程
Oct 23 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
Apr 23 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使用ICQ网关发送手机短信
2013/10/30 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Python内置模块logging用法实例分析
2018/02/12 Python
python线程池threadpool实现篇
2018/04/27 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
教师师德教育的自我评价
2013/10/31 职场文书
教师读书笔记
2015/06/29 职场文书