Ajax2.0: formData总结1：普通文件上传

最新推荐文章于 2021-08-05 12:46:00 发布

simoonQian

最新推荐文章于 2021-08-05 12:46:00 发布

阅读量289

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_40814356/article/details/82810347

版权

web前端专栏收录该内容

51 篇文章 2 订阅

订阅专栏

Ajax2.0: formData总结1：普通文件上传

普通的请求
文件上传

##如何用formData上传数据到服务器？

Get方法

前台：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      window.onload = function() {
        let oUser = document.getElementById('user');
        let oPass = document.getElementById('pass');
        let oBtn = document.getElementById('btn');

        oBtn.onclick = function() {
          //创建一个formdata对象
          let data = new FormData();

          data.set('user', oUser.value);
          data.set('pass', oPass.value);

          let oAjax = new XMLHttpRequest();
          //get方法
          let arr = [];
          data.forEach((value, key) => {
            arr.push(`${encodeURIComponent(key)} = ${encodeURIComponent(value)}`);
          })

          oAjax.open('GET', `http://localhost:8080/api?${arr.join('&')}`, true);
          oAjax.send();

          oAjax.onreadystatechange = function() {
            if(oAjax.readyState == 4) {
              if(oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
                alert('成功')
              } else {
                alert('失败')
              }
            }
          }
        }
      }
    </script>
  </head>
  <body>
    用户名:<input type="text" id="user" value="">
    密码: <input type="text" id="pass" value="">
    <input type="button" id="btn" value="提交">
  </body>
</html>

后台：

const http = require('http');
const urlLib = require('url');
const querystring = require('querystring');


http.createServer((req, res) => {

  let {pathname: url, query: get} = urlLib.parse(req.url, true);

  let arr = [];

  req.on('data', data => {
    arr.push(data);
    console.log(arr);
  })

  req.on('end', () => {
    let post = querystring.parse(Buffer.concat(arr).toString());

    console.log(url, get, post)
  })

}).listen(8080)

这里后台涉及到几个方法：
对http请求所带的数据进行解析：querystring.parse(str,separator,eq,options)

str指需要反序列化的字符串;
separator（可省）指用于分割str这个字符串的字符或字符串，默认值为"&";
eq（可省）指用于划分键和值的字符或字符串，默认值为"=";
options（可省）该参数是一个对象，里面可设置maxKeys和decodeURIComponent这两个属性：

解析完整的URL地址url.parse()

常用的有：

host
port
pathname
path
query

Post方法

前台的ajax方法修改：

oAjax.open('POST', 'http://localhost:8080/api', true);
oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

oAjax.send(data);

最终后台得到的post参数为：

{ ‘------WebKitFormBoundaryQU2Q1NFZ1C9DMzoG\r\nContent-Disposition: form-data; name’:
‘“user”\r\n\r\nsimoon\r\n------WebKitFormBoundaryQU2Q1NFZ1C9DMzoG\r\nContent-Disposition: form-data; name=“pass”\r\n\r\n123\r\n------WebKitFormBoundaryQU2Q1NFZ1C9DMzoG–\r\n’ }

这是因为formdata为了支持文件上传，所以不支持如下请求头：

oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

得出结论：

如果是普通的请求，就用老的ajax方法。如果是文件上传就用formData

simoonQian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax2.0: formData总结1：普通文件上传

Ajax2.0: formData总结1：普通文件上传普通的请求文件上传##如何用formData上传数据到服务器？Get方法前台：&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title
复制链接

扫一扫