PHP使用HTML5 FormData对象提交表单操作示例
时间:2022-07-27
本文章向大家介绍PHP使用HTML5 FormData对象提交表单操作示例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了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);
案例:
提交表单
效果图:
文件结构图:
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);
?
- 这或许是对小白最友好的python入门了吧——18,用while循环处理列表
- 如何在js中将统计代码图标隐藏
- 警惕IT黑洞
- 这或许是对小白最友好的python入门了吧——17,while循环
- 泛型介绍(接上一篇,具体的事例随后呈上)
- PHP高级编程之守护进程
- 看到他我一下子就悟了-- 泛型(2)
- ExtJS4中设置tabpanel的tab高度问题
- Oracle写错误与文件离线
- 看到他我一下子就悟了-- 泛型(1)
- EXTJS4 Grid Filter 插件的使用 与后台数据解析------Extjs 查询筛选功能的实现
- [Java]读取文件方法大全
- WPF Application 类介绍以及怎样修改启动方式
- C#基础知识回顾-- 反射(4)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- hadoop伪分布式之配置yarn并运行MR程序(WordCount)
- 【python-leetcode637-树的宽度遍历】二叉树的层平均值
- graphSAGE的python实现
- 【python-leetcode111-树的宽度遍历】二叉树的最小深度
- 基于TypeScript封装Axios笔记(四)
- spring之泛型依赖注入
- 【python-leetcode113-树的深度遍历】路径总和Ⅱ
- spring之为什么要使用AOP(面向切面编程)?
- useContext更佳实践
- 【论文笔记】张航和李沐等提出:ResNeSt: Split-Attention Networks(ResNet改进版本)
- [前端]GOFLY项目-响应式登录页的设计和实现
- [GO] golang练习项目-gorm与mysql的增删查改操作
- 设计模式~门面模式
- c语言之define和typedef的区别
- TSINGSEE青犀视频官网全新改版即将上线,系统界面迎来整体升级