JQuery 기반 FormData 비동기식 데이터 파일 제출

웹에서 데이터 제출 이벤트는 자주 발생하지만 대부분의 경우 html의form폼 제출을 원하지 않습니다. 왜냐하면form폼 제출은 현재 브라우저의 조작을 중단하고 다른 주소로 이동할 수 있기 때문입니다. (이 주소가 현재 페이지일지라도) html의 대역폭을 낭비하는 것을 반복적으로 불러올 수 있습니다. 우리는 갱신되지 않고 비동기적인 제출 효과에 도달하여 사용자에게 더 좋은 체험을 주기를 바랍니다.이때 aax를 사용해야 한다. aax는 폼에 의존하지 않고 http 요청을 한 번 하고 서버 응답의 데이터를 되찾을 수 있다. 이것이 바로 aax의 간편한 점이다.JQuery에서 봉인된 aax 함수를 사용하면 더욱 간편합니다.다음은 aax를 사용하여 데이터를 비동기적으로 제출하는 몇 가지 방법을 열거합니다.
1:jquery.js의 $.ajax 방법
이 방법은 jquery에 의존합니다.js 플러그인, 많은 버전이 있습니다. 직접 다운로드할 수 있습니다.
우리는 여기에 $가 필요합니다.ajax 방법에서 요청 주소, 요청 유형, 전송해야 할 데이터, 요청이 성공한 후에 실행해야 할 조작 등 매개 변수를 지정합니다. 여기서 간략하게 설명합니다.

$.ajax({
    url:" url ",
    type:'post',
    data:{key:'value'},
    success:function(){
      alert(' ')；
    }
  })

이것은 $입니다.ajax 방법의 간단한 사용법.이 중 매개 변수 데이터는 당신이 전송할 데이터입니다. 이 데이터는 Json 대상과 문자열을 지원합니다.데이터 데이터가form 폼에 있는 경우 json을 쓰는 것이 느려서 jquery에 있는serizlize () 방법을 사용할 수 있습니다.이 방법은 문자열을 되돌려줍니다.

$.ajax({
    url:" url ",
    type:'post',
    data:$('form').serialize(), // "id=asdasd&s=000&name=1233"
    success:function(){
      alert(' ')；
    }
  })

그럼 서류도 이렇게 제출했나요?
파일을 제출하려면 $가 필요합니다.ajax는 특수한 설정을 하고 FormData의 대상을 사용합니다.<input type="file" name="f" id="f" multiple>

var fd = new FormData();
    fd.append("name", "bill");
    fd.append("photo", $('#f')[0].files[0]);
    fd.append("photo2", $('#f')[0].files[1]);
    $.ajax({
      url: '/webform1.aspx',
      type: 'post',
      processData: false,
      contentType: false,
      data: fd,
      success: function () {
        alert("ok")
      }
    })

fd 대상을 만들고 키 값을 추가합니다. 이 값은 파일일 수 있습니다. $('#f') [0]는 id=f를 꺼내는 요소입니다. 왜 [0]인지는 jquery 대상이 기본적으로 0인 인덱스를 가지고 있기 때문입니다. $('f')는 jquery 대상입니다. [0]는 Dom의 모든 속성과 방법을 사용할 수 있습니다.그리고 파일을 추출하기 위해 files를 사용합니다.여기에서 저는 files[0]와 files[1]를 사용했습니다. 이것은 멀티플이 여러 개의 파일을 업로드할 수 있는 것입니다. 저는 여기에 두 개를 업로드했습니다.
그리고 서버는 파일을 받을 수 있습니다. 폼과 같은 수신 방법입니다.
물론 하나의 form을 하나의 FormData 대상으로 직접 전환할 수 있다. 그러면 우리는 필요한 내용을 하나하나의 append를 FormData에 넣는 것을 피할 수 있다.

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
 url: "stash.php",
 type: "POST",
 data: fd,
 processData: false, //  
 contentType: false  //  
});

append를 사용하여 추가할 때formdata의 키가 존재하면 다시 추가할 수 없습니다. 이번 append 작업을 무시합니다. 이것은 폼 추출 값을 자주 사용하는 데 상당히 불리하기 때문에 set 방법으로 새로운 키-value 값을 추가하는 것을 권장합니다. set는 이미 존재하는 키 값을 수정하고 존재하지 않으면 만드는 것을 의미합니다.곧
fd.set("CustomField", "This is some extra data");
$.ajax는 주동적인 이벤트입니다. 사용자가 단추를 눌러야만 실행할 수 있습니다. 여기는 $입니다.ajax 함수는 단추의 클릭 이벤트에 넣고 다음 방법을 사용할 수 있습니다.

$('form').submit(function{
  //  ， 
$.ajax({ 
     
   });
   return false;
})

submit 함수는 폼이 제출될 때 실행할 수 있습니다. $로 실행할 수 있습니다.ajax 함수의 트리거 이벤트를 사용한 다음returnfalse를 사용하여 이 폼의 제출을 미리 막습니다.
주의: 몇몇 문장에서 FormData의 호환 문제를 FormData가 일찌감치 제기하였다.그리고 주식에 가입하세요. jquery에 있는 aax를 사용하여 파일을 전송하려면 사용하지 마세요.물론 원생적인 aax는 파일을 직접 전송하는 방법이 있기 때문에 관심 있는 사람은 볼 수 있다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.