Ajax upload implements js Processing Based on the Data returned by the server. ajaxjs

Ajax upload implements js Processing Based on the Data returned by the server. ajaxjs

The example in this article describes how to perform js Processing Based on the Data returned by the server through Ajax upload. Share it with you for your reference. The details are as follows:

To put it bluntly, I still use form submission and add an iframe to the current page to jump the submitted content to iframe, which leads to the illusion that the page will not be refreshed.

I have also done the upload 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, which can be the direct output content, it can also be an output script for operations such
Copy codeThe Code is as follows: response. getWriter (). write ("<script type = \" text/javascript \ "> parent. item_update.uploadUponSize (); </script> ");

Or
Copy codeThe Code is as follows: response. getWriter (). write ("Upload successful! ");

This method encapsulates all the operations on the page into the servlet. One requirement is that you cannot access the server-side servlet. After the upload is successful, the server returns only one identifier, then, perform operations on the page.
A load event can be triggered when the iframe is submitted based on the form. Therefore, the following requirements are required:

1. register the load event for iframe when submitting the form.

2. Then, use js to determine the returned flag.

3. Remove the binding event to avoid multiple binding events.

The following is an example.

If the server is simple, only one flag is 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 files

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>

In this way, the page can be operated based on the Content returned by the page.

I hope this article will help you with Ajax programming.