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';
以流的方式接收二进制数据。完成！！！
