概述：隨着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';
以流的方式接收二進制數據。完成！！！