2016-08-14 157 views
0

這裏我試圖通過ajax.I使用post方法提交表單,使用formData對象來收集和發送form.But當我從目標頁面回顯字段值時,它返回一個空字符串。這就是說表單沒有提交。在控制檯我收到一個200的狀態代碼,formdata對象也獲得了所有的輸入。可能是什麼原因?ajax請求返回一個空字符串作爲迴應

<form action='home.php' method='POST' id='myform' enctype='multipart/form-data'> 
name : <input type='text' name='myname' id='name_select'> 
file : <input type='file' name='myfile' id='file_select' > 
<input type='submit' value='form submit' id='submitbtn'> 
</form> 

<script> 
var name=document.getElementById('name_select'); 
var file=document.getElementById('file_select'); 
var sub=document.getElementById('submitbtn'); 
var form=document.getElementById('myform'); 

sub.addEventListener('click',function(event){ 
    event.preventDefault(); 
    sub.value='uploading...'; 
    var xhr=new XMLHttpRequest(); 
    var formdata=new FormData(); 
    var files=file.files[0]; 

    var inputs=document.getElementsByTagName('input'); 
    for(i=0;i<inputs.length;i++){ 

     if(!inputs[i].disabled){ 

      if(inputs[i].type=='file'){ 

       formdata.append(inputs[i].name,files,files.name); 
      }else{ 

       formdata.append(inputs[i].name,inputs[i].value); 
      } 
     } 
    } 

    xhr.onreadystatechange=function(){ 

     if(xhr.readyState==4){ 

      if(xhr.status==200){ 

       console.log('form submitted'); 
       alert((xhr.response)); 
       sub.value='upload'; 

      }else{ 
       console.log('there is a problem'); 
      } 
     } 
    } 
    xhr.open('POST','home.php',true); 
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhr.send(formdata); 
}); 
</script> 

home.php:

<?php 


     echo $_POST['myname']; 

?> 

回答

0

this so post solved my problem. 問題出在下面的行

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

,因爲我有二進制數據要發送到服務器,所以我有多部分/格式數據作爲表單的enctype elemet.application/X WWW的形式-urlencoded用於向服務器發送查詢字符串。另一方面,multipart/form-data用於向服務器發送大型二進制數據。因此,省略上述行解決了我的問題。

0

這可能在多形式的數據發生。 通常你可以使用jQuery表單插件來簡化ajax。 http://malsup.com/jquery/form/

$('#myForm').ajaxForm(); 

這個插件是基於jQuery的Ajax和大多支持jQuery的阿賈克斯一切(beforeSend,成功,失敗,...)。

+0

我沒在找jQuery解決方案:) –