Méthode de téléchargement Ajax pour implémenter le traitement js basé sur les données renvoyées par le serveur

Cet article présente principalement la méthode de téléchargement Ajax pour implémenter le traitement js basé sur les données renvoyées par le serveur. L'exemple analyse les compétences liées au traitement des requêtes Ajax et Java et au renvoi de la requête de données côté serveur

L'exemple de cet article indique que le téléchargement Ajax implémente la méthode de traitement js basée sur les données renvoyées par le serveur. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le téléchargement Ajax indique clairement que vous devez utiliser la soumission par formulaire. Ajoutez une iframe à la page actuelle et transférez le contenu soumis vers l'iframe, créant l'illusion que la page n'est pas actualisée.

J'ai déjà effectué un téléchargement, en utilisant essentiellement le composant commons-fileupload. L'étape de base consiste à utiliser le servlet pour traiter le téléchargement, puis à utiliser l'instance d'objet PrintWrite pour afficher le contenu. afficher directement le contenu, ou il peut s'agir de scripts de sortie pour des opérations telles que

response.getWriter().write("<script type=\"text/javascript\"> parent.item_update.uploadUponSize();</script>");

ou

response.getWriter().write("上传成功！");

Cette méthode encapsule toutes les opérations côté page dans des servlets. que vous ne pouvez pas accéder aux servlets côté serveur, et une fois le téléchargement réussi, le serveur renverra uniquement un identifiant, puis fonctionnera sur la page.
Lorsque le formulaire est soumis à cette iframe, un événement de chargement sera déclenché, donc l'idée de cette exigence est la suivante :

1 Lorsque le formulaire est soumis, enregistrez l'événement de chargement pour l'iframe.

2. Utilisez ensuite js pour juger le drapeau renvoyé.

3. Supprimez les événements de liaison pour éviter plusieurs événements de liaison.

Publiez un exemple ci-dessous.

C'est plus simple côté serveur, un seul flag sera renvoyé.

package com.justsy.servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
public class UploadServlet extends HttpServlet { 
  private static final long serialVersionUID = 1L; 
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    this.doPost(request, response) ; 
  } 
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    PrintWriter writer = response.getWriter() ; 
    response.setContentType("text/html") ; 
    writer.print("<root>ok</root>") ; 
  } 
}

fichier js

function submitForm(){ 
  $("#hidden_iframe").load(function(){ 
    var content = document.getElementById("hidden_iframe").contentWindow.document.body.innerHTML; 
    content = createXml(content); 
    var root = $(content).find("root").eq(0); 
    alert(root.text()); 
    $("#hidden_iframe").unbind("load"); 
  }); 
  document.getElementById("form2").submit(); 
} 
function createXml(str){ 
  if (document.all) { 
    var xmlDom = new ActiveXObject("Microsoft.XMLDOM"); 
    xmlDom.loadXML(str); 
    return xmlDom; 
  } 
  else { 
    return new DOMParser().parseFromString(str, "text/xml"); 
  } 
}

fichier html

<form action="uploadServlet.do" id="form2" enctype="multipart/form-data" method="post" target="hidden_iframe">
  <input type="hidden" name="method" value="uploadExcel" /><input type="button" value="Submit" onclick="submitForm()"/>
</form>
<iframe name="hidden_iframe" id="hidden_iframe" width="300" height="200">
</iframe>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment résoudre l'erreur 403 lorsque Django utilise des données de publication ajax

Une brève analyse des IE Résultats de la requête Ajax Problèmes de mise en cache

Une explication détaillée de l'utilisation de diverses méthodes AJAX

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!