Comment faire pour convertir XMLHttpRequest() en ajax

Question

J'utilise généralement ajax, mais jamais eu à envoyer des fichiers avec lui auparavant. Ma recherche initiale a indiqué que vous ne pouviez pas envoyer de fichiers avec ajax donc j'ai trouvé et utilisé cette méthode; mais des recherches ultérieures ont indiqué qu'il était possible d'envoyer un fichier avec ajax.

Maintenant, je suis préoccupé par le changement parce que tout fonctionne pour le moment et je ne comprends toujours pas comment html/jscript traite les fichiers. Je me demande donc, comment cette fonction peut-elle être convertie en Ajax d'une manière qui ne m'oblige pas à changer pour changer le code upload_metric_post.php?

function uploadMetric(file){ 
    var MetricID = $("#MetricID").val(); 
    var ReportPeriod = $("#ReportPeriod").val(); 
    if(MetricID == ""){ 
     $("#upload_results").addClass("alert-danger"); 
     $("#upload_results").removeClass("alert-success"); 
     $("#upload_results").html("Please select the MetricID before uploading."); 
    }else{ 
     var url = 'php/upload_metric_post.php'; 
     var xhr = new XMLHttpRequest(); 
     var fd = new FormData(); 
     xhr.open("POST", url, true); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4 && xhr.status == 200) { 
       // Request went thru ok, handle response. 
       var response = xhr.responseText; 
       console.log(response); 
       var jsonResponse = JSON.parse(response); 

       if(jsonResponse["success"] == false){ 
        var errors = jsonResponse["msg"] + jsonResponse["error"]; 
        $("#upload_results").addClass("alert-danger"); 
        $("#upload_results").removeClass("alert-success"); 
        $("#upload_results").html(errors); 
        $("#dropped_rows_panel").html(jsonResponse["bad_rows"]); 
        $("#start_over_btn").show(); 
        $("#process_btn").hide(); 
       }else if(jsonResponse["success"] == true){ 
        $("#upload_results").addClass("alert-success"); 
        $("#upload_results").removeClass("alert-danger"); 
        $("#upload_results").html(jsonResponse["msg"]); 
        $("#dropped_rows_panel").html(jsonResponse["bad_rows"]); 
        $("#start_over_btn").show(); 
        $("#process_btn").show(); 
       } 
      } 
     }; 
     fd.append("MetricID", MetricID); 
     fd.append("ReportPeriod", ReportPeriod); 
     fd.append("upload_file", file); 
     xhr.send(fd); 
    } 
} 

est ici la norme que je l'utilise tout au long de mon code, ne jamais avoir à eu envoyer un fichier avant, je ne sais pas vraiment comment convertir à mon standard:

function get_assets(display_qty, go_page, sorts, sorts_order, filters_ordered, CallBack) { 
    $.ajax({ 
     method: "POST", 
     url: "php/assets_post.php", 
     data: { 
      display_qty: display_qty, 
      go_page: go_page, 
      sorts: sorts, 
      sorts_order: sorts_order, 
      filters_ordered: filters_ordered 
     }, 
     success: function(result){ 
      CallBack(result); 
     }, 
     error: function(result){ 
      CallBack(result); 
     } 
    }); 
} 

Answer 1

XMLHttpRequest et AJAX sont la même chose. Ajax auquel vous faites référence peut être la fonction de jQuery nommée ajax pour implémenter un appel asynchrone à un point de terminaison de serveur. jQuery enveloppe réellement l'objet XMLHttpRequest.

Answer 2

Même votre code est ajax, si recherchent jquery syntaxe ajax pour votre code le faire comme suit:

.ajax $ ({méthode: "POST", url: "php/upload_metric_post.php", }) .done (fonction (data, textStatus, jqXHR) {var réponse = xhr.responseText; console.log (réponse); var jsonResponse = JSON.parse (réponse); --- et le reste est identique ---})

Answer 3

Voici la solution finale, elle repose sur l'envoi des données à ajax en tant qu'objet FormData. Les paramètres contentType et processData sont critiques car ils ne fonctionnent pas sans eux; pourquoi il ne fonctionne sans eux, je ne sais pas pas:

function uploadMetric(file){ 
    var MetricID = $("#MetricID").val(); 
    var ReportPeriod = $("#ReportPeriod").val(); 
    if(MetricID == ""){ 
     $("#upload_results").addClass("alert-danger"); 
     $("#upload_results").removeClass("alert-success"); 
     $("#upload_results").html("Please select the MetricID before uploading."); 
    }else{ 
     var fd = new FormData(); 
     fd.append("MetricID", MetricID); 
     fd.append("ReportPeriod", ReportPeriod); 
     fd.append("upload_file", file); 
     $.ajax({ 
      method: "POST", 
      url: "php/upload_metric_post.php", 
      data: fd, 
      contentType: false, 
      processData: false, 
      success: function(result){ 
       console.log(result); 
       var jsonResponse = JSON.parse(result); 
       if(jsonResponse["success"] == false){ 
        var errors = jsonResponse["msg"] + jsonResponse["error"]; 
        $("#upload_results").addClass("alert-danger"); 
        $("#upload_results").removeClass("alert-success"); 
        $("#upload_results").html(errors); 
        $("#dropped_rows_panel").html(jsonResponse["bad_rows"]); 
        $("#start_over_btn").show(); 
        $("#step3_intructions").html(errors + "<br />Please check your file, fix any errors and start over."); 
        $("#step3_intructions").addClass("alert-danger"); 
        $("#step3_intructions").removeClass("alert-success"); 
        $("#step3_intructions").show(); 
        $("#process_btn").hide(); 
       }else if(jsonResponse["success"] == true){ 
        $("#ReportPeriod").attr('disabled','disabled'); 
        $("#MetricID").attr('disabled','disabled'); 
        $("#fileinput").attr('disabled','disabled'); 
        $("#fileinput_label").attr('disabled','disabled'); 
        $("#upload_results").addClass("alert-success"); 
        $("#upload_results").removeClass("alert-danger"); 
        $("#upload_results").html(jsonResponse["msg"]); 
        $("#dropped_rows_panel").html(jsonResponse["bad_rows"]); 
        $("#start_over_btn").show(); 
        $("#step3_intructions").html("<p>Please review any dropped rows. If there are no dropped rows and you are ready to process the metric, press 'Process Metric'. If there are dropped rows you have the following options:<p><ol><li>Correct the rows in the original file you uploaded, re-upload and check the dropped rows again or,</li><li>if you are okay with the dropped rows you may process the accepted rows anyway.</li></ol>"); 
        $("#step3_intructions").addClass("alert-success"); 
        $("#step3_intructions").removeClass("alert-danger"); 
        $("#step3_intructions").show(); 
        $("#process_btn").show(); 
       } 
       CallBack(result); 
      }, 
      error: function(result){ 
       alert("mm"); 
       CallBack(result); 
      } 
     }); 
    } 
}