HTML表单提交总结
概述：随着HTML5的兴起，前端越来越多样化，比如表单的提交，现在就有多种方式可以选择，下面总结一下常见的表单提交方式。
1.最基本的表单提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交示例 - 基本表单提交</title>
</head>
<body>
<form action="/server_url" method="post" onsubmit="return beforeSubmit()">
ID：<input id="username" type="text" name="username" />
Password：<input id="password" type="password" name="password" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
function beforeSubmit() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username.length < 6 || password.length < 6) {
alert('格式不正确！');
return false;
} else {
return true;
}
}
</script>
</body>
</html>
上面的代码非常简单，注意from表单中的onsubmit属性一定要有return，否则是没有效果的。onsubmit属性是可选的，如果需要js对表单做一些简单的验证，那么可以使用这种方式来做，js如果验证不通过则返回false，那么表单是不会提交的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交示例 - 基本表单提交2</title>
</head>
<body>
<form id="form_login" action="/server_url" method="post">
ID：<input id="username" type="text" name="username" />
Password：<input id="password" type="password" name="password" />
</form>
<button id="btn-submit" onclick="beforeSubmit()">Submit</button>
<script type="text/javascript">
var loginForm = document.getElementById('form_login');
function beforeSubmit() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username.length < 6 || password.length < 6) {
alert('格式不正确！');
} else {
loginForm.submit();
}
}
</script>
</body>
</html>
上面稍微做了一点点修改，form元素增加了id，去掉了onsubmit，还有一个type为submit的input按钮也去掉了，取而代之的是在from的外面增加了一个普通按钮。
这个按钮点击会触发一段js，在这个js中可以做数据校验，如果验证通过，则通过js提交表单，form表单增加id的作用就是为了js获取表单元素变的方便。
以上两种方式都是最基本的提交表单的方式，实际工作中可以随意选择。
2.FormData表单提交。
下面，我们来看通过HTML5的FormData来提交表单，这种表单的提交方式是异步的，浏览器的地址是不会发生变化的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交示例 - FormData</title>
</head>
<body>
<form name="login_form" action="/server_url" method="post">
ID：<input id="username" type="text" name="username" />
Password：<input id="password" type="password" name="password" />
</form>
<button id="btn-submit" onclick="beforeSubmit()">Submit</button>
<script type="text/javascript">
function beforeSubmit() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username.length < 6 || password.length < 6) {
alert('格式不正确！');
return;
} // 1.创建一个FormData对象，直接把我们的表单传进去
var formData = new FormData(document.forms.namedItem("login_form")); // 2.创建一个http请求对象
var xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.open('post', '/server_url');
xmlHttpRequest.onload = function(resp) {
if (xmlHttpRequest.status == 200) {
alert('提交成功！');
} else {
alert('Error:' + xmlHttpRequest.status);
}
};
xmlHttpRequest.send(formData);
}
</script>
</body>
</html>
这种方式提交相对前面的两种来说，异步是最大的不同，这样带来的一个好处就是异步上传文件就很爽了。表单中添加一个type为file的input元素，文件就直接可以上传了，非常方便。
3.使用jquery发送FormData表单。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交示例 - JQuery发送FormData</title>
</head>
<body>
<form name="login_form" action="/server_url" method="post">
ID：<input id="username" type="text" name="username" />
Password：<input id="password" type="password" name="password" />
</form>
<button id="btn-submit" onclick="beforeSubmit()">Submit</button> <script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script>
<script type="text/javascript">
function beforeSubmit() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username.length < 6 || password.length < 6) {
alert('格式不正确！');
return;
} // 1.创建一个FormData对象，直接把我们的表单传进去
var formData = new FormData(document.forms.namedItem("login_form")); // 2.通过jquery发送出去
$.ajax({
url: "/server_url.php",
type: "POST",
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
}).done(function(resp) {
alert('success!');
}).fail(function(err) {
alert('fail!')
}); }
</script>
</body>
</html>
4.直接发送二进制文件数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>http请求发送二进制文件</title>
</head>
<body>
<input id="avatar" type="file" name="avatar" />
<button id="btn-submit" onclick="beforeSubmit()">Submit</button>
<script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script>
<script type="text/javascript">
function beforeSubmit() {
var avatar = document.getElementById('avatar').files[0];
if (typeof avatar === 'undefined') {
alert('请选择一个图片！');
return;
}
var reader = new FileReader();
// reader.readAsDataURL(avatar); // 读取的是图片的base64字符串，可以直接设置给图片的src属性
// reader.readAsBinaryString(avatar); // 读取的是图片的二进制数据
// reader.readAsText(avatar); // 以字符串读取文件内容，一般用于读取字符文件
reader.readAsArrayBuffer(avatar);
reader.onload = function() {
var data = this.result; // 原生http请求发送二进制文件
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open('post', '/server_url.php');
xmlHttpRequest.onload = function() {
if (xmlHttpRequest.status == 200) {
alert('success!');
} else {
alert('Error:' + xmlHttpRequest.status);
}
};
xmlHttpRequest.send(data); // 用jquery发送二进制文件
$.ajax({
url: "/server_url.php",
type: "POST",
data: data,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
}).done(function(resp) {
alert('success!');
}).fail(function(err) {
alert('fail!')
});
};
}
</script>
</body>
</html>
服务器接收：
<?php
$fp = fopen('avatar.png', 'wb');
$size = fwrite($fp, file_get_contents('php://input'));
print 'success';
以流的方式接收二进制数据。完成！！！
HTML表单提交总结的更多相关文章
- from表单提交数据之后，后台对象接受不到值
如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...
- 不使用Ajax，如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
- golang-web框架revel一个表单提交的总结
这里要介绍好是revel框架的表单post提交的列子,主要是用于入门学习,和一些知识点的讲解: 首先: 来了解一个问题那就是重复提交表单,做过form表单提交的同学都知道,如果表单提交后不做处理,那么 ...
- 关于我们经常用到的form表单提交
工作中遇到了太多太多的表单提交问题,曾经学过一个HTML的表单提交给 另外一个HTML页面,对于后台怎么获取有点想不起来了. 今天便做了几个实验,提交订单到后台,来掩饰后台如何接受表单内容: 实验 一 ...
- 天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
- html表单提交方式
xml 表单提交方式: * 使用submit提交 <form> 要提交的数据 <input type="submit" /'> </form> ...
- form表单提交问题
1.提交后不能跳转到指定页面 jsp代码 <form class="form-horizontal" role="form"> <p clas ...
- Java EE之servlet处理表单提交的请求
1.在源包下新建一个Servlet页,取名为LoginServlet: package weinidingServlet; //该Servlet所 ...
- MVC中处理表单提交的方式（Ajax+Jquery）
MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...
- 使用RequireJs和Bootstrap模态框实现表单提交
下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:
随机推荐
- imperva 网管替换
事情是这样的 某某银行的imperva DAM审计设备出现蜂鸣的响声.经检查电源没有问题,怀疑是硬盘坏了 . 然后我就去底层查看 运行命令 :impctl platform storage raid ...
- [MySQL FAQ]系列 — EXPLAIN结果中哪些信息要引起关注
我们使用EXPLAIN解析SQL执行计划时,如果有下面几种情况,就需要特别关注下了: 首先看下 type 这列的结果,如果有类型是 ALL 时,表示预计会进行全表扫描(full table scan) ...
- Hadoop（三）：MapReduce程序（python）
使用python语言进行MapReduce程序开发主要分为两个步骤,一是编写程序,二是用Hadoop Streaming命令提交任务. 还是以词频统计为例 一.程序开发1.Mapper for lin ...
- Linux基础 - crontab
列出当前用户设置的定时任务 crontab -l 编辑定时任务 crontab -e 用法 m h dom mon dow * * * * * command 字段详解: *:any m: minut ...
- Codeforces 264B Good Sequences(DP+素数筛)
题目链接:http://codeforces.com/problemset/problem/264/B 题目大意:给出n个单调递增的数,让你找出最长的好序列,好序列是一种单调递增的并且相邻元素的最大公 ...
- Kubernetes 部署kafka ACL(单机版)
一.概述 在Kafka0.9版本之前,Kafka集群时没有安全机制的.Kafka Client应用可以通过连接Zookeeper地址,例如zk1:2181:zk2:2181,zk3:2181等.来获取 ...
- 如何验证一个地址可否使用—— MmIsAddressValid函数分析
又是一篇内核函数分析的博文,我个人觉得Windows的内核是最好的老师,当你想实现一个功能之前可以看看Windows内核是怎么做的,说不定就有灵感呢:) 首先看下官方的注释说明: /*++ Routi ...
- appium----【Mac】address already in user 127.0.0.1:4725,端口被占用的查找与kill进程
报错截图示例: 解决方法: Mac: lsof -i tcp:4723 #查看端口号 sudo kill -9 29443 #杀死进程 Windows: netstat -aon|fi ...
- 中断、轮询、事件驱动、消息驱动、数据流驱动(Flow-Driven)？
轮询.事件驱动.消息驱动.流式驱动 ---数据流驱动 Unidirectional Architecture? 中断.事件.消息这样一种机制来实现更好的在多任务系统里运行... 阻塞,非阻塞同步,异步 ...
- 关于ARM指令那些你必须知道的东西
1.32位ARM指令每一位都有其作用,具体如下: 低12为第二操作数, 12~15位为目的寄存器, 16~19位为第一操作数, 20~27就是操作码, 28~31就是条件域. 2.多寄存器load和s ...