テキストや画像、チェックボックスに$ .ajaxを使用するにはどうすればよいですか？

Question

テキストやメッセージ、チェックボックスの値を含むフォームをajaxで投稿する必要があります。
これらの投稿はすべてPHPコントローラに送信されます。 私は常に$ .postを使用しています（テキストのみのtchatの場合のみ）。$ .ajaxは決してありません。 ここに私形式：

if ($member_data->member->isBreeder){ 

echo '<div id="foalDiscussion"></div>'; 
echo '<form id="form" action="#" method="post" enctype="multipart/form-data">'; 
echo '<textarea id="foalNewsTextArea" name="mess_text"></textarea>'; 
echo '<ul id="mainBreedList">'; 
foreach ($breeder_foalList as $v){ 

    echo '<li><label class="checkbox-inline"><input type="checkbox" name="foaltarget" value='.$v['foal_id'].'>'.$v['foal_name'].'</label>'; 

} 
    echo '</ul>'; 



    <input id="buttonNews" type="file" accept="image/*" name="image" /> 
    <input class="btn btn-secondary" id="button" type="submit" value="Envoyer"> 
</form> 
<div id="err"></div>'; 
} 

私は$アヤックスでコントローラにデータを送信、データを取得する方法がわかりません。ここで

私の古典の$ .postチャットは：

function postFoalMessage(text, foalId, isFoalNews){ 


$('#foalTextArea').val(''); 

$.post('http://localhost:8080/MHFManager/src/controller/ChatController.php', 
    { 
     mess_text : text, 
     foal_id : foalId, 
     isFoalNews : isFoalNews, 


    },function(data) 
    { 

    }); 


} 

ヘルプは大歓迎です！

Answer 1

私はそれを見つけました！ここに私のPHP

if ($member_data->member->isBreeder){ 

echo '<div id="foalDiscussion"></div>'; 
echo '<textarea id="foalNewsTextArea" name="mess_text"></textarea>'; 
echo '<ul id="mainBreedList">'; 
foreach ($breeder_foalList as $v){ 

    echo '<li><label class="checkbox-inline"><input type="checkbox" name="foaltarget" value='.$v['foal_id'].'>'.$v['foal_name'].'</label>'; 

} 
    echo '</ul>'; 

echo '<button class="btn btn-secondary btn-xs" id="buttonNews"><span class="glyphicon glyphicon-comment"></span></button>'; 

<form id="form" action="#" method="post" enctype="multipart/form-data"> 
    <input id="uploadImage" type="file" accept="image/*" name="image" /> 
    <input class="btn btn-secondary" id="button" type="submit" value="Upload"> 
</form> 

} 

ここで私のJavaScript。私は "提出"せずにデータを取得します。

$('#buttonNews').click(function(){ 
var formData = new FormData(); 
formData.append("mess_text", $('#foalNewsTextArea').val()); 

$('#mainBreedList li input:checked').each(function() 
     { 
      valeurs.push($(this).val()); 

     }); 
formData.append("checkbox", valeurs); 
formData.append("mess_img", $("#uploadImage").prop("files")[0]); 
//console.log(formData); 

var text = $('#foalNewsTextArea').val(); 
var img = $("#uploadImage").prop("files")[0]; 
var isNews = true; 
$.each(valeurs, function(i,foalId){ 
    $.ajax({ 
     url : "http://localhost:8080/MHFManager/src/controller/ChatController.php", 
     type: "POST", 
     data: formData, 
     processData: false, 
     contentType: false 
    }); 
}); 
valeurs = []; 

$('#foalNewsTextArea').val(''); 

Answer 2

実際にもう少し読んだら、serialize（）はinput type = "file"要素をキャッチしないことに気付きました。私はあなたの最高の答えはここにあると思う： 以下How can I upload files asynchronously?

はまだ$ .postは$のためだけのショートカットです

$ .postの代わりに$アヤックスを使用して、非常に基本をカバーする私のオリジナルのポスト...です.ajax - でも、私は$ .ajaxを使うのと同じくらい簡単だとわかっています。

http://api.jquery.com/jquery.ajax/

/* Add listener to process the form */ 
$(body).on("submit","#form", function(event){ 
    event.preventDefault(); // prevent default browser post. 
    sendFormToHandler($(this)); // call your custom form handler 
}); 

/* Your custom ajax form hander */ 
function sendFormToHandler(formObj){ 
    var formData = formObj.serialize(); // get the form data 
    $.ajax({ 
     url: '/path/to/form/handler.php', 
     data: formData, 
     method: 'POST', 
     contentType: 'multipart/form-data', 
     success: function(response){ 
      $("#divToPutResponseIn").html(response); // on success, put response in div 
     } 
    }); 
}