Html5 FormData+Ajax表单数据提交

首先认识下form表单

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

或者使用另一种方式                     
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);  
    }  
uploadFiles('/server', this.files);
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'}));


上一篇: PHP 中 9 大缓存技术总结

下一篇: 你必须了解的基础的 Linux 网络命令

分享

版权属于:破冰者博客

文章链接:https://ice-breaker.cn/post/3

转载时必须以链接形式注明原始出处及本声明。

表情