HTML5 FormData 인터페이스를 사용하여 더 쉬운 ajax

AJAX를 통한 양식 제출 처리는 단일 페이지 응용 프로그램 및 점진적인 향상에 중요합니다. 일반적인 형태를 살펴 보겠습니다 :

jQuery는 ajax의 양식 데이터 직렬화를 단순화합니다

일반 JavaScript에는 수동 데이터 추출이 필요합니다

<code class="language-html"><form id="myform" action="webservice.php" method="post">
  <input type="email" name="email">
  <select name="job">
    <option value="">Select Role</option>
    <option>web developer</option>
    <option>IT professional</option>
    <option>other</option>
  </select>
  <input type="checkbox" name="freelancer"> are you a freelancer?
  <input type="radio" name="experience" value="4"> less than 5 year's experience
  <input type="radio" name="experience" value="5"> 5 or more year's experience
  <textarea name="comments" rows="3" cols="60"></textarea>
  <input type="submit" value="Submit">
</form></code>

그러나 그러나 html5

인터페이스는이 프로세스를 크게 간소화합니다

이 간결한 코드는 jQuery 동등한 것보다 빠르고 읽을 수 있습니다. <les>는 자동으로 인코딩을 처리합니다. 파일 업로드를 활성화하여 를 사용합니다. 수동으로 데이터를 추가 할 수도 있습니다 : <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;$(&quot;#myform&quot;).on(&quot;submit&quot;, function(e) { e.preventDefault(); $.post(this.action, $(this).serialize()); });&lt;/code&gt;</pre> <ob> 파일 또는 블로브는 옵션 파일 이름으로 추가 할 수 있습니다. <br>는 매우 오래된 IE 버전 만 제외하고 광범위한 브라우저 지원을 즐깁니다. 자세한 내용은 참조 및 MDN 문서를 참조하십시오. <questions> html5 formdata 인터페이스 및 Ajax 에 대한 질문이 자주 묻습니다 <h> html5 formdata 인터페이스는 무엇이며 Ajax에서 어떻게 작동합니까? <m> html5 인터페이스는 Ajax 요청에 대한 양식 데이터를 나타내는 키 값 쌍을 만드는 것을 단순화합니다. Ajax는 서버와의 비동기 데이터 교환을 활성화하여 전체 재 장전없이 웹 페이지를 업데이트합니다. <create> FormData 객체를 어떻게 만들 수 있습니까? <p> 빈 객체에 를 사용하거나 </p>> 양식 요소에서 하나를 작성하십시오. <app> formData 객체에 데이터를 추가 할 수 있습니까? <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;document.getElementById(&quot;myform&quot;).onsubmit = function(e) { e.preventDefault(); var f = e.target, formData = '', xhr = new XMLHttpRequest(); for (var i = 0, d, v; i &lt; f.elements.length; i++) { d = f.elements[i]; if (d.name &amp;&amp; d.value) { v = (d.type == &quot;checkbox&quot; || d.type == &quot;radio&quot; ? (d.checked ? d.value : '') : d.value); if (v) formData += d.name + &quot;=&quot; + escape(v) + &quot;&amp;&quot;; } } xhr.open(&quot;POST&quot;, f.action); xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded; charset=UTF-8&quot;); xhr.send(formData); };&lt;/code&gt;</pre> <p> 메소드를 사용하십시오 <send> ajax 요청이있는 FormData 객체를 어떻게 보낼 수 있습니까? <code>FormData

사용 . 헤더는 자동으로

<code class="language-javascript">document.getElementById("myform").onsubmit = function(e) {
  e.preventDefault();
  var f = e.target, formData = new FormData(f), xhr = new XMLHttpRequest();
  xhr.open("POST", f.action);
  xhr.send(formData);
};</code>

. 로 설정됩니다 jQuery의 ajax 메소드와 함께 FormData 인터페이스를 사용할 수 있습니까? 예, 그러나

및 FormData 브라우저가 FormData 인터페이스를 지원하는지 확인하려면 어떻게해야합니까? multipart/form-data

사용

<code class="language-javascript">var formData = new FormData();
formData.append("name", "value");
formData.append("a", 1);
formData.append("b", 2);</code>

FormData 인터페이스를 사용하여 파일을 보낼 수 있습니까? ​​예,

또는 FormData 객체를 추가하십시오 FormData 객체에서 데이터를 삭제할 수 있습니까? 예, FormData 메소드를 사용하십시오.

FormData 객체의 데이터를 반복 할 수 있습니까? 예, , ,

또는 를 사용하십시오 fetch? 와 함께 FormData 인터페이스를 사용할 수 있습니까? 예, 요청의

로 전달하십시오.

위 내용은 HTML5 FormData 인터페이스를 사용하여 더 쉬운 ajax의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!