JS使用post提交的两种方式

JS使用post提交的两种方式:

方式一：通过XMLHttpRequest对象进行post提交

步骤如下：

1.创建XMLHttpRequest对象

2.设置请求参数

请求参数包括

type – 请求方法（GET或POST）

url – 指定服务器地址

async – 是否同步请求（true或false）

data – 发送的数据

3.发送请求

4.监听响应状态变化并处理响应

5.处理请求失败的情况

下面是通过XMLHttpRequest对象进行post提交的示例代码：

function postAjax(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var res = xhr.responseText;
        callback(res);
      }
    }
  };
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  xhr.send(data);
}

示例调用:

var data = 'name=john&age=25';
postAjax('/api/user', data, function(res) {
  console.log(res);
})

方式二：通过表单提交进行post提交

步骤如下：

1.创建表单元素

2.设置表单属性

属性包括

method – 请求方法（GET或POST）

action – 指定服务器地址

3.创建表单项并设置其值

4.提交表单

5.处理响应

下面是通过表单提交进行post提交的示例代码：

function postForm(url, data) {
  var form = document.createElement('form');
  form.method = 'POST';
  form.action = url;
  for (var key in data) {
    if (data.hasOwnProperty(key)) {
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = data[key];
      form.appendChild(input);
    }
  }
  document.body.appendChild(form);
  form.submit();
}

示例调用:

var data = {
  name: 'john',
  age: 25
};
postForm('/api/user', data);