ajax请求返回一个空字符串作为响应

Here i am trying to submit form using post method via ajax.I used formData object to colleect and send the form.But when i echo a field value from destination page it returns an empty string.Is that means the form is not submitting.In console i receive a status code of 200.and formdata object also gets all the input.What might be the reason ?

在这里,我试图通过ajax使用post方法提交表单。我使用formData对象来收集和发送表单。但是当我从目标页面回显一个字段值时,它返回一个空字符串。这表示表单没有提交。控制台我收到状态代码200. formdata对象也获得所有输入。可能是什么原因?

<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'];

?>

2 个解决方案

#1

This might happen in multipart form data. Generally you can simplify ajax using jquery form plugin. http://malsup.com/jquery/form/

这可能发生在多部分表单数据中。通常,您可以使用jquery表单插件简化ajax。 http://malsup.com/jquery/form/

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

This plugin is based on jquery ajax and mostly support everything in jquery ajax (beforeSend, success, fail, ...).

这个插件基于jquery ajax,主要支持jquery ajax中的所有内容(beforeSend,success,fail,...)。

#2

this so post solved my problem. the problem lies in the following line

这个帖子解决了我的问题。问题在于以下几行

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

as i have binary data to send to server so i have multipart/form-data as enctype in form elemet.application/x-www-form-urlencoded is used to send a query string to the server.On the other hand multipart/form-data is used to send large binary data to server.So ,omitting the above stated line solved my problem.

因为我有二进制数据发送到服务器所以我有多部分/表格数据作为enctype形式elemet.application / x-www-form-urlencoded用于向服务器发送查询字符串。另一方面multipart / form -data用于向服务器发送大的二进制数据。因此,省略上述行解决了我的问题。

#1