Maison  >  Article  >  interface Web  >  Comment gérer les fichiers téléchargeables en JavaScript/jQuery à l'aide de requêtes AJAX ?

Comment gérer les fichiers téléchargeables en JavaScript/jQuery à l'aide de requêtes AJAX ?

DDD
DDDoriginal
2024-10-19 15:19:02676parcourir

How to Handle Downloadable Files in JavaScript/jQuery Using AJAX Requests?

Téléchargement de fichiers via POST avec des données JSON en JavaScript/jQuery

Scénario :

Vous disposez d'une application Web d'une seule page qui communique avec un service Web RESTful via des appels AJAX. Vous devez :

  • Soumettre une requête POST avec des données JSON à une URL REST.
  • Renvoyer JSON si la requête spécifie une réponse JSON.
  • Renvoyer un fichier téléchargeable fichier binaire si la requête spécifie une réponse binaire (par exemple, PDF, XLS).

Problème :

Comment gérer les fichiers téléchargeables dans le code JavaScript du client lorsque vous utilisez des appels AJAX ?

Solution :

Bien que le code fourni gère avec succès les réponses JSON, il n'est pas directement possible de télécharger des fichiers à l'aide de requêtes AJAX en raison des limitations du type de données. option. Cependant, des approches alternatives peuvent être adoptées :

Méthode 1 : Générer et stocker des fichiers sur le serveur

  • Faire une requête AJAX pour générer le fichier binaire et renvoyer un Réponse JSON avec une URL vers le fichier.
  • Dans le gestionnaire de réussite AJAX, redirigez le navigateur vers l'URL à l'aide de window.location.href pour télécharger le fichier.

Avantages :

  • Gestion centralisée des fichiers sur le serveur.

Inconvénients :

  • Nécessite plusieurs AJAX appels.
  • Surcharge supplémentaire de gestion des fichiers sur le serveur.

Méthode 2 : Créer un Iframe

  • Effectuer une requête POST à /create_binary_file.php avec les données JSON.
  • Créez une iframe et définissez son attribut src sur la réponse de la requête POST, qui devrait contenir l'URL du fichier téléchargeable.
  • Ajoutez l'iframe à la page en utilisant document.body.appendChild() ou $.body.append() de jQuery.

Avantages :

  • Favorise l'interaction de l'utilisateur pour le téléchargement du fichier.
  • Aucune gestion de fichiers supplémentaire sur le serveur.

Inconvénients :

  • Nécessite une modification le DOM.

Considérations :

  • La méthode 1 nécessite plus de surcharge du serveur mais permet plus de contrôle et de gestion des fichiers.
  • La méthode 2 peut être plus simple mais implique de modifier le DOM et peut ne pas convenir aux pages complexes.
  • Le serveur doit avoir la configuration de type MIME appropriée pour faciliter le téléchargement des fichiers binaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn