FormData使用教程

一、FormData使用教程

FormData是 Ajax2.0(XMLHttpRequest Level2)提供的一种将form表单元素name和value组合成键值，实现表单数据的序列化，从而减少from表单元素的拼接，提高工作效率对的接口，以方便将form表单数据通过 XMLHttpRequest.send()方法发送到后端，可以使用该对象来处理form表单元素并方便的进行文件上传。

XMLHttpRequest是一个浏览器接口，通过它，我们可以使用 Javascript进行 HTTP(S)通信。 XMLHttpRequest在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2月， XMLHttpRequest Level 2草案提出来了，相对于上一代，它有一些新的特性，其中 FormData就是 XMLHttpRequest Level 2新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。

二、如何用javascript以post方式提交form表单

1、在JavaScript中，提交一个form表单的方法相对直接。首先，你需要获取form元素，这可以通过document.getElementById("myform")来实现。这里，"myform"是form的id。

2、一旦获得了form对象，调用其submit()方法即可实现提交。完整的代码可以这样写：

3、var formobj= document.getElementById("myform");

4、这种方法适用于简单的form提交需求。然而，如果需要以POST方式提交数据，还可以利用JavaScript的fetch()方法或XMLHttpRequest对象。例如，使用fetch()方法：

5、'Content-Type':'application/x-www-form-urlencoded',

6、body: new URLSearchParams(new FormData(formobj))

7、这里，'/submit'是后端处理提交数据的URL。Content-Type设置为application/x-www-form-urlencoded，以适应POST请求的格式。FormData对象用于收集form中的数据，然后通过URLSearchParams将其转换为正确的格式。

8、这两种方法各有优缺点。直接使用form对象的submit()方法简单直接，但不适用于复杂的表单操作或需要控制请求头和请求体的情况。使用fetch()或XMLHttpRequest提供了更多的灵活性，但需要编写更多的代码。

9、总的来说，选择哪种方法取决于具体的需求。对于简单的表单提交，直接使用form对象的submit()方法就足够了。如果需要更复杂的操作，比如设置请求头、处理不同的数据格式或处理跨域请求，那么使用fetch()或XMLHttpRequest可能是更好的选择。

10、在实际应用中，你还可以考虑使用第三方库，比如axios，它提供了一个更简洁易用的API来处理网络请求。

11、以上是关于如何用JavaScript以POST方式提交form表单的一些基本介绍，希望能帮助到你。

三、JavaScript中fetch()用法实例

1、在JavaScript中，fetch()提供了一个用于获取资源的接口，包括跨域请求，取代了传统的XMLHttpRequest。其基于Promise的设计使得用法更为简洁，且API模块化设计使其更合理。fetch()返回的是Promise对象，简化了异步请求的处理过程。

2、使用fetch()发送GET请求如下所示：

3、var url=';;

4、.then(response=> response.json())

5、.then(json=> console.log(json))

6、.catch(err=> console.log('Request Failed', err));

7、而使用传统的XMLHttpRequest则需要更复杂的回调函数：

8、var httpRequest= new XMLHttpRequest();

9、httpRequest.onreadystatechange= function(){

10、 if(httpRequest.readyState=== 4){

11、 if(httpRequest.status=== 200){

12、 var data= JSON.parse(httpRequest.responseText);

13、httpRequest.open('GET', url, true);

14、fetch()还提供了Response对象，它包含了HTTP响应的各种属性，如响应状态码、标头信息等，可以立即读取。

15、const response= await fetch(url);

16、response.headers.get('Content-Type')//获取标头信息

17、response.headers.has('Content-Type')//检查是否存在

18、response.headers.set('Content-Type','text/html')//设置标头

19、response.headers.append('Content-Type','application/json')//添加标头

20、response.headers.delete('Content-Type')//删除标头

21、response.blob()//读取二进制内容

22、response.formData()//读取表单内容

23、response.arrayBuffer()//读取二进制数组

24、通过Response.clone()可以创建副本，实现多次读取。

25、 headers:{"Content-Type":"text/plain;charset=UTF-8"},

26、 referrerPolicy:"no-referrer-when-downgrade",

27、可以使用AbortController取消fetch请求：

28、let controller= new AbortController();

29、fetch(url,{ signal: controller.signal});

30、controller.signal.addEventListener('abort',()=> console.log('abort!'));

31、以上是对JavaScript中fetch()用法的详细介绍，希望对你有所帮助。