서버에서 반환된 데이터를 기반으로 js 처리를 구현하는 Ajax 업로드 방법

이 기사에서는 서버에서 반환된 데이터를 기반으로 js 처리를 구현하는 Ajax 업로드 방법을 주로 소개합니다. 예제에서는 Ajax 요청 및 Java 처리 및 서버 측 데이터 요청 반환 관련 기술을 분석합니다. 기사에서는 js 처리를 위해 데이터를 반환하는 서버 측 메서드를 기반으로 Ajax 업로드 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

Ajax 업로드에는 양식 제출을 사용해야 하고, 현재 페이지에 iframe을 추가하고, 제출된 콘텐츠를 iframe으로 점프해야 한다고 명시되어 있어 페이지가 새로 고쳐지지 않는 듯한 착각을 불러일으킵니다.

기본적으로 commons-fileupload 구성 요소를 사용하여 이전에 업로드를 완료한 적이 있습니다. 기본 단계는 서블릿을 사용하여 업로드를 처리한 다음 PrintWrite 개체 인스턴스를 사용하여 표시 내용을 직접 출력하거나 스크립트를 출력하는 것입니다.

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

또는

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

와 같은 작업입니다. 이 접근 방식은 모든 페이지 측 작업을 서블릿으로 캡슐화하는 것입니다. 이제 한 가지 요구 사항은 업로드가 성공한 후에는 서버 측 서블릿에 액세스할 수 없다는 것입니다. 식별자를 클릭한 다음 페이지에서 작업을 수행합니다.

양식이 이 iframe에 제출되면 로드 이벤트를 트리거할 수 있으므로 이 요구 사항에 대한 아이디어는 다음과 같습니다.

1 양식이 제출되면 iframe에 대한 로드 이벤트를 등록합니다.

2. 그런 다음 js를 사용하여 반환된 플래그 비트를 판단합니다.

3. 여러 바인딩 이벤트를 방지하려면 바인딩 이벤트를 제거하세요.

아래에 예시가 게시되어 있습니다.

서버 측에서는 더 간단합니다. 하나의 플래그만 반환됩니다.

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>

위 내용은 앞으로 모두에게 도움이 되기를 바랍니다.

관련 기사:

django가 ajax 포스트 데이터를 사용할 때 403 오류를 해결하는 방법

Ajax 요청 결과에 대한 IE의 캐싱 문제에 대한 간략한 분석

다양한 AJAX 사용에 대한 자세한 설명 방법

위 내용은 서버에서 반환된 데이터를 기반으로 js 처리를 구현하는 Ajax 업로드 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!