温故而知新： 关于 js Form 方式提交的一些新认知

这里介绍的是通过js进行异步form提交，而不是表单Form Submit提交。

 

提交方式主要有以下两种：

1. 参数为字符串方式的提交，如：a=b&c=d 
2. formData方式提交， 如：new FormData()

 

（可选）简单的php测试代码：

<?php 
header('Access-Control-Allow-Origin:*');
var_dump($_REQUEST);

 

微坑爹：请不要试图将下文的request.open("POST") 换为 request.open("GET")。由于 request.Send( ... ) 只能发送POST参数，GET请求直接在URL后拼接参数即可。

但不管你是GET请求还是POST请求，Send()还是得调用的，不然怎么发送请求呢……

 

一、参数为字符串，如：a=b&c=d 方式的提交。

需要注意必须指定请求头为 application/x-www-form-urlencoded;charset=utf-8 

// 源生xhr方式
var request = new XMLHttpRequest();
request.open("POST", "http://fuckyou.com/test.php", true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send('a=b&c=d');

// jQuery 方式
$(function(){
  $.ajax({
      url: "http://fuckyou.com/test.php",
      type: "post",
      data: 'a=b&c=d',
      contentType: 'application/x-www-form-urlencoded;charset=utf-8',
      success: function (data) {
          console.log(data);
      }
  })
})

 

如果你的参数是json对象，也可以通过简单 obj2formdata 函数的拼接转成&相连的字符串。

var obj2formdata = (body) => {
    let formparams = '';
    Object.keys(body).forEach(key => {
         if (formparams.length > 0) {
           formparams += '&';
         }
         formparams = formparams + key + '=' + body[key];
    });
    return formparams
}

var request = new XMLHttpRequest();
request.open("POST", "http://fuckyou.com/test.php", true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(obj2formdata({a: 'b', c: 'd'}));

 后端打印出来的数据如图所示：

 

 

二、formData方式提交，不需要指定头为/form类型，不然后端会出现奇怪的数据格式，原因不详。

// 源生xhr方式
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456);
var request = new XMLHttpRequest();
request.open("POST", "http://fuckyou.com/test.php", true);
// request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(formData);


// jQuery 方式
$(function(){
  var formData = new FormData();
  formData.append("username", "Groucho");
  formData.append("accountnum", 123456);

  $.ajax({
      url: "http://fuckyou.com/test.php",
      type: "post",
      data: formData,
      processData:false,
      contentType:false,
      success: function (data) {
          console.log(data);
      }
  })
})

 

 后端打印出来的数据如图所示：

 

如果你设置头，会发现后端打印出来的数据是这样的：