web-dev-qa-db-ja.com

formQueryオブジェクトがjqueryで機能しないAJAX post？

コードに飛び込んでみましょう：

var formData = new FormData();

formData.append('name', dogName);
formData.append('weight', dogWeight);
formData.append('activity', dogActivity);
formData.append('age', dogAge);
formData.append('file', document.getElementById("dogImg").files[0]);
console.log(formData);

ここでは、すべての情報をサーバーに非同期で送信するために、formDataオブジェクトにいくつかの文字列と1つのファイルオブジェクトを追加しています。

その直後に、このjquery ajaxリクエストがあります。

$.ajax({
  type: "POST",
  url: "/foodoo/index.php?method=insertNewDog",
  data: formData,
  processData: false,
  contentType: false,
  success: function(response){
     console.log(response);
  },
  error: function(){
  }
});

だからここでPOSTサーバーへの情報、サーバーphpファイルにPOSTの単純なprint_rがあります。そして、そうではない。

残念ながら、console.log（data）の私の応答は空です。

また、[ネットワーク]タブでHEADERをチェックすると、次の空の出力が表示されます。

enter image description here

成功関数が呼び出されます（説明のためだけに）

javascriptjqueryajaxform-data
12
noa-dev

JQueryを介してajaxリクエストを送信し、FormDataを送信する場合、このFormDataでJSON.stringifyを使用する必要はありません。また、ファイルを送信する場合、コンテンツタイプはboundryを含むmultipart/form-dataでなければなりません-このようなmultipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA

したがって、jQuery ajaxを介していくつかのファイルを含むFormDataを送信するには、以下を行う必要があります。

  • dataを変更せずにFormDataに設定します。
  • processDataをfalseに設定します（jQueryがデータを自動的にクエリ文字列に変換しないようにします）。
  • contentTypeをfalseに設定します（そうしないと、jQueryが正しく設定しないためです）。

リクエストは次のようになります。

var formData = new FormData();

formData.append('name', dogName);
// ... 
formData.append('file', document.getElementById("dogImg").files[0]);


$.ajax({
    type: "POST",
    url: "/foodoo/index.php?method=insertNewDog",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log(response);
    },
    error: function(errResponse) {
        console.log(errResponse);
    }
});
19
Viktor Bahtev

前のanwswerとまったく同じようにしたが、まだ動作しない場合は心配しないでくださいits working

多分 intelligence and quick wathはnot working

enter image description here

心配しないで、network tapenter image description here

その動作中

これがあなたの時間を節約することを願っています

5
Basheer AL-MOMANI
//For those who use plain javascript

var form = document.getElementById('registration-form'); //id of form
var formdata = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST','form.php',true);
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
//if you have included the setRequestHeader remove that line as you need the 
// multipart/form-data as content type.
xhr.onload = function(){
 console.log(xhr.responseText);
}
xhr.send(formdata);
0
ajinkya