Ajax-Upload-Methode zur Implementierung der JS-Verarbeitung basierend auf den vom Server zurückgegebenen Daten

In diesem Artikel wird hauptsächlich die Methode des Ajax-Uploads vorgestellt, um die JS-Verarbeitung basierend auf den vom Server zurückgegebenen Daten zu implementieren. Das Beispiel analysiert die zugehörigen Fähigkeiten der Ajax-Anfrage und der Java-Verarbeitung und der Rückgabe der serverseitigen Datenanforderung

Das Beispiel dieses Artikels zeigt, dass Ajax-Upload die js-Verarbeitungsmethode basierend auf den vom Server zurückgegebenen Daten implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Beim Ajax-Upload heißt es eindeutig, dass Sie die Formularübermittlung verwenden sollten. Fügen Sie der aktuellen Seite einen Iframe hinzu und springen Sie den übermittelten Inhalt zum Iframe, wodurch die Illusion entsteht, dass die Seite nicht aktualisiert wird.

Ich habe das Hochladen bereits durchgeführt und dabei im Grunde die Commons-Fileupload-Komponente verwendet. Der grundlegende Schritt besteht darin, das Servlet zum Verarbeiten des Uploads zu verwenden und dann die PrintWrite-Objektinstanz zum Ausgeben des Anzeigeinhalts zu verwenden Geben Sie den Inhalt direkt aus, oder es können Skripte für Operationen wie

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

oder

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

ausgegeben werden. Diese Methode kapselt alle seitenseitigen Vorgänge in Servlets Das serverseitige Servlet und der Upload sind erfolgreich. Danach gibt der Server nur noch eine Kennung zurück und bearbeitet dann die Seite.
Wenn das Formular an diesen Iframe gesendet wird, wird ein Ladeereignis ausgelöst. Die Idee für diese Anforderung lautet also:

1 Wenn das Formular gesendet wird, registrieren Sie das Ladeereignis für den Iframe.

2. Verwenden Sie dann js, um die zurückgegebene Flagge zu beurteilen.

3. Entfernen Sie Bindungsereignisse, um mehrere Bindungsereignisse zu vermeiden.

Veröffentlichen Sie unten ein Beispiel.

Für die Serverseite ist es einfacher, es wird nur ein Flag zurückgegeben.

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>") ; 
  } 
}

js-Datei

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"); 
  } 
}

HTML-Datei

<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>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So beheben Sie den 403-Fehler, wenn Django Ajax-Postdaten verwendet

Eine kurze Analyse von IEs Ajax-Anfrageergebnisse Caching-Probleme

Eine detaillierte Erklärung der Verwendung verschiedener AJAX-Methoden

Das obige ist der detaillierte Inhalt vonAjax-Upload-Methode zur Implementierung der JS-Verarbeitung basierend auf den vom Server zurückgegebenen Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!