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

我不知道如何获取数据，使用$ .ajax将数据发送到控制器。

这是我的经典$ .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

实际上在阅读了一下之后 - 我意识到serialize（）没有捕获输入类型=＆＃34;文件＆＃34;元素。我想你最好的答案是： How can I upload files asynchronously?

以下是我的原始帖子，内容涵盖了使用$ .ajax而不是$ .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
        }
    });
}

Answer 2

我找到了！这是我的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。我没有＆＃34;提交＆＃34;。

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

如何使用带文本和/或图像的$ .ajax和复选框？

2 个答案: