서버에서 반환된 데이터를 기반으로 js 처리를 구현하는 Ajax 업로드 방법-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-05-25 10:31:28

원래의

1530명이 탐색했습니다.

이 기사에서는 서버에서 반환된 데이터를 기반으로 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>

로그인 후 복사

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