如何在文本和/或圖像和複選框中使用$ .ajax？

-2

我必須發佈一個可以包含文本和/或消息和/或複選框值的表單。
所有這些帖子都將發送到一個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>'; 
}

我不知道如何獲取數據，用$就發送數據到控制器。

這裏我的古典$。員額聊天：

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) 
    { 

    }); 


}

幫助是值得歡迎的！

來源

2016-12-21 G. Lulu

你沒有張貼您的JavaScript代碼... – arkascha

就像你做'$ .post'，但更可能的選擇... – jeroen

jQuery的文檔提供了它實現的功能非常優秀的例子。特別是你不瞭解這些的東西？ – arkascha

我找到了！這裏我的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('');

來源

2016-12-25 18:02:14

實際上，在閱讀了更多內容之後 - 我意識到serialize（）不會捕獲input type =「file」元素。我覺得你最好的答案就在這裏： How can I upload files asynchronously?

下面仍然是我原來的職位涵蓋使用$阿賈克斯，而不是$。員額非常基本的...

$。員額只是爲$快捷方式.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 
     } 
    }); 
}

來源

2016-12-21 14:47:19

如何在文本和/或圖像和複選框中使用$ .ajax？

回答

相關問題