Comment puis-je déclencher des téléchargements de fichiers dans les réponses aux publications AJAX ?-js tutoriel-php.cn

Comment puis-je déclencher des téléchargements de fichiers dans les réponses aux publications AJAX ?

Mary-Kate Olsen

Libérer： 2024-12-20 09:34:07

original

762 Les gens l'ont consulté

How Can I Trigger File Downloads in AJAX Post Responses?

Gestion des téléchargements de fichiers dans les réponses aux publications AJAX

Lors de la conception d'une application AJAX, il est courant de gérer différents types de réponses, notamment JSON et potentiellement des fichiers. pièces jointes. La détection du type de réponse basée sur les en-têtes Content-Type et Content-Disposition est simple. Cependant, déclencher une boîte de dialogue de téléchargement peut poser un défi.

Heureusement, les navigateurs modernes fournissent une solution via FileAPI. Les extraits de code suivants montrent comment implémenter les téléchargements de fichiers dans les requêtes de publication AJAX :

// Using native XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
  if (this.status === 200) {
    // Retrieve the blob and filename from the response
    var blob = this.response;
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
      filenameRegex = /filename[^;=\n]*=((['"])).*?|[^;\n]*)/;
      matches = filenameRegex.exec(disposition);
      if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
    }
    // Manage file download based on browser capabilities
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // IE workaround for a known issue
      window.navigator.msSaveBlob(blob, filename);
    } else {
      var URL = window.URL || window.webkitURL;
      var downloadUrl = URL.createObjectURL(blob);
      var a = document.createElement("a");
      if (a.download !== 'undefined') {
        a.href = downloadUrl;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
      } else {
        window.location.href = downloadUrl;
      }
      setTimeout(function() { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
    }
  }
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send($.param(params, true));

Copier après la connexion

Si vous utilisez jQuery.ajax :

$.ajax({
  type: "POST",
  url: url,
  data: params,
  xhrFields: {
    responseType: 'blob' // to avoid binary data being mangled on charset conversion
  },
  success: function(blob, status, xhr) {
    // Retrieve the blob and filename from the response
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
      filenameRegex = /filename[^;=\n]*=((['"])).*?|[^;\n]*)/;
      matches = filenameRegex.exec(disposition);
      if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
    }
    // Manage file download based on browser capabilities
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // IE workaround for a known issue
      window.navigator.msSaveBlob(blob, filename);
    } else {
      var URL = window.URL || window.webkitURL;
      var downloadUrl = URL.createObjectURL(blob);
      var a = document.createElement("a");
      if (a.download !== 'undefined') {
        a.href = downloadUrl;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
      } else {
        window.location.href = downloadUrl;
      }
      setTimeout(function() { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
    }
  }
});

Copier après la connexion

En incorporant ces techniques, vous pouvez vous assurer que votre AJAX les demandes de publication peuvent gérer de manière transparente les pièces jointes et déclencher des boîtes de dialogue de téléchargement pour le client.

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!