J'utilise jQuery et Ajax pour soumettre des données et des fichiers, mais je ne sais pas comment envoyer à la fois des données et des fichiers sous un seul formulaire ?
J'utilise actuellement les deux méthodes presque de la même manière, mais la manière de collecter les données dans un tableau est différente, les données utilisent .serialize(); ;= new FormData($(this)[0]);
Est-il possible de combiner ces deux méthodes pour télécharger des fichiers et des données sous une seule forme via Ajax ?
Données jQuery, Ajax et html
$("form#data").submit(function(){ var formData = $(this).serialize(); $.ajax({ URL : window.location.pathname, tapez : 'POST', données : formData, asynchrone : faux, succès : fonction (données) { alerte (données) }, cache : faux, contentType : faux, ProcessData : faux }); renvoie faux ; }); Envoyer Documentation jQuery, Ajax et html
$("form#files").submit(function(){ var formData = new FormData($(this)[0]); $.ajax({ URL : window.location.pathname, tapez : 'POST', données : formData, asynchrone : faux, succès : fonction (données) { alerte (données) }, cache : faux, contentType : faux, ProcessData : faux }); renvoie faux ; }); Comment puis-je combiner ce qui précède afin de pouvoir envoyer des données et des fichiers sous un seul formulaire via Ajax ?
Mon objectif est de pouvoir envoyer tous ces formulaires ensemble via Ajax, est-ce possible ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Une autre option consiste à utiliser une iframe et à y définir la cible du formulaire.
Vous pouvez essayer ceci (il utilise jQuery) :
function ajax_form($form, on_complete) { var iframe; if (!$form.attr('target')) { //为表单创建一个唯一的iframe iframe = $("").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body')); $form.attr('target', iframe.attr('name')); } if (on_complete) { iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]'); iframe.load(function () { //获取服务器响应 var response = iframe.contents().find('body').text(); on_complete(response); }); } }Cela fonctionne dans tous les navigateurs et vous n'avez pas besoin de sérialiser ou de préparer des données. Un inconvénient est que vous ne pouvez pas suivre les progrès.
De plus, au moins pour Chrome, la requête n'apparaît pas sous l'onglet "xhr" dans les outils de développement, mais sous "doc".
Le problème que j'ai eu était d'utiliser le mauvais identifiant jQuery.
Vous pouvez utiliser un formulaireutilisant ajaxpour télécharger des données et des fichiers.
PHP + HTML
jQuery + Ajax
$("form#data").submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); });Version simplifiée
$("form#data").submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.post($(this).attr("action"), formData, function(data) { alert(data); }); });