Ajax upload method to implement js processing based on the data returned by the server

This article mainly introduces the method of Ajax upload to implement js processing based on the data returned by the server. The example analyzes the related skills of Ajax request and java processing and returning the server-side data request

The example of this article describes Ajax upload implements js processing method based on the data returned by the server. Share it with everyone for your reference. The details are as follows:

It is said clearly in Ajax that it is better to use form submission, add an iframe to the current page, and jump the submitted content to the iframe, creating an illusion that the page is not refreshed.

I have done uploading before, basically using the commons-fileupload component. The basic step is to use the servlet to process the upload, and then use the PrintWrite object instance to output the display content. It can be to directly output the content, or it can be Output scripts for operations such as

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

or

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

. This approach is to encapsulate all page-side operations into servlets. Now one requirement is that you cannot access the server-side servlet, but the upload is successful. After that, the server will only return an identifier, and then operate on the page.
You can trigger a load event when the form is submitted to this iframe, so the idea for this requirement is:

1. When the form is submitted, register the load event for the iframe.

2. Then use js to judge the returned flag bit.

3. Remove binding events to avoid multiple binding events.

Post an example below.

It is simpler for the server side, only one flag will be returned.

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 file

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 file

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to solve the 403 error when django uses ajax post data

A brief analysis of IE's Ajax request results Caching issues

Comparative explanation of the use of various AJAX methods

The above is the detailed content of Ajax upload method to implement js processing based on the data returned by the server. For more information, please follow other related articles on the PHP Chinese website!