Html5 FormData+Ajax表單數據提交

首先來認識一下FormData表單

var formData = new FormData(); 
formData.append('name', 'zhangsan');
formData.append('age', 20);
formData.append('gender', 'M');
//防止跨域，注意，該字符串由服務端生成後一部分發送到session中，一部分放在form隱藏域中
formData.append('csrf', 'yty98db128swdx827dcd3jdxh'); 

或者使用另外一種方式

<form id='registerform' name='user/register' action='user/register'>     
<input type='text' name='username' value='張三'>     
<input type='email' name='email' value='zhangsan@example.com'>     
<input type='number' name='birthDate' value='1940'>     
<input type='submit' onclick='sendForm(this.form); return false;'> 
</form>

var formData = new FormData(document.forms['registerform']); 
formData.append('csrf', 'yty98db128swdx827dcd3jdxh');

讓後構建Ajax

function sendForm(formData) {        
     var xhr = new XMLHttpRequest();     
     xhr.open('POST', form.action, true);     
     xhr.onload = function(e) {         // ...     };  
     // 指定通訊過程當中狀態改變時的回調函數 
     xhr.onreadystatechange = function()
     {     
         // 通訊成功時，狀態值爲4     
         var completed = 4;     
         if(xhr.readyState === completed)
         {         
             if(xhr.status === 200)
             {            
              // 處理服務器發送過來的數據         
             }else{             // 處理錯誤        
              
             }     
             
          }
     };   
     xhr.send(formData);     
   }

使用FormData進行文件上傳

function uploadFiles(url, files) {   
var formData = new FormData();   
for (var i = 0, file; file = files[i]; ++i) 
{     
formData.append(file.name, file);   
}   
var xhr = new XMLHttpRequest();   
xhr.open('POST', url, true);   
xhr.onload = function(e) { ... };   
xhr.send(formData);  // multipart/form-data } 
document.querySelector('input[type="file"]').addEventListener('change', function(e) {   
uploadFiles('/server', this.files); }, 
false);

function upload(blobOrFile) 
{   
    var xhr = new XMLHttpRequest();   
    xhr.open('POST', '/server', true);   
    xhr.onload = function(e) { ... };   // Listen to the upload progress.   
    var progressBar = document.querySelector('progress');   
    xhr.upload.onprogress = function(e) {     
    if (e.lengthComputable) {       
            progressBar.value = (e.loaded / e.total) * 100;       
            progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.    
         }   
     };   
     xhr.send(blobOrFile); 
 } 
 upload(new Blob(['hello world'], {type: 'text/plain'}));

參考連接：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

                http://javascript.ruanyifeng.com/bom/ajax.html

                http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html