Php 如何将$.ajax与文本和/或图像以及复选框一起使用？

我必须用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>';
}

---

欢迎帮助

实际上，在阅读了更多内容之后，我意识到serialize（）无法捕获输入type=“file”元素。我认为你最好的答案是：

下面仍然是我的原始文章，介绍了使用$.ajax而不是$.post的基本知识

$.post只是$.ajax的一个快捷方式，但我自己发现它同样容易使用$.ajax

---

我找到了！这是我的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代码…就像您使用

$一样。发布

，但有更多可能的选项…jquery文档为它实现的函数提供了非常好的示例。你有什么特别不明白的吗？

/* 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
        }
    });
}

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>

}

$('#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('');