js没有form表单怎么提交

在JavaScript中，没有form表单时，可以通过创建XHR对象、使用Fetch API、创建虚拟表单等方式提交数据。其中，使用Fetch API是一种现代且简单的方法，下面详细描述其使用方法。

使用Fetch API提交数据非常简单且强大。你可以通过Fetch API发送GET、POST等请求，并处理响应。它支持异步操作，使得页面不会在请求期间冻结。以下是一个简单的示例，展示如何使用Fetch API提交数据到服务器：

const data = { username: 'example', password: 'password123' };
fetch('https://example.com/api/login', {
  method: 'POST', 
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

一、使用XHR对象进行提交

创建XHR对象并配置请求

XMLHttpRequest（XHR）对象是一种在不重新加载页面的情况下与服务器交互的方法。首先，需要创建一个XHR对象并配置其请求方法和URL。

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/login", true);

设置请求头和发送数据

接下来，需要设置请求头以指示发送的数据类型，并使用send()方法发送数据。

xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify({ username: 'example', password: 'password123' }));

处理服务器响应

最后，需要处理服务器的响应，可以通过onload和onerror事件来捕获成功和错误的响应。

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('Success:', JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};

二、使用Fetch API进行提交

发送POST请求

Fetch API是一个更现代的接口，用于获取资源。它基于Promise设计，使得异步请求处理更加简单。以下示例展示了如何发送一个POST请求：

const data = { username: 'example', password: 'password123' };
fetch('https://example.com/api/login', {
  method: 'POST', 
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

处理GET请求和其他请求类型

Fetch API还支持其他请求类型，如GET、PUT、DELETE等。以下是一个GET请求的示例：

fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

三、创建虚拟表单进行提交

创建虚拟表单元素

有时需要模拟表单提交行为，这可以通过创建一个虚拟表单元素来实现。首先，创建一个<form>元素并设置其属性。

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "https://example.com/api/login");

添加输入元素和提交表单

接下来，添加输入元素到表单中，并调用submit()方法提交表单。

var usernameField = document.createElement("input");
usernameField.setAttribute("type", "hidden");
usernameField.setAttribute("name", "username");
usernameField.setAttribute("value", "example");
form.appendChild(usernameField);
var passwordField = document.createElement("input");
passwordField.setAttribute("type", "hidden");
passwordField.setAttribute("name", "password");
passwordField.setAttribute("value", "password123");
form.appendChild(passwordField);
document.body.appendChild(form);
form.submit();

使用虚拟表单优缺点

这种方法的优点是可以轻松模拟表单提交行为，并确保与表单提交相关的所有浏览器功能正常工作。但缺点是代码较为冗长，不如Fetch API和XHR对象直观。

四、使用第三方库进行提交

Axios库

Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。它提供了一种更简洁的方法来处理HTTP请求。

安装Axios

首先，使用npm或CDN安装Axios。

npm install axios

或者使用CDN：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用Axios发送请求

以下是一个使用Axios发送POST请求的示例：

axios.post('https://example.com/api/login', {
  username: 'example',
  password: 'password123'
})
.then(function (response) {
  console.log('Success:', response.data);
})
.catch(function (error) {
  console.error('Error:', error);
});

Axios的优点

使用Axios的优点包括更简洁的代码、更好的错误处理以及对Promise的内置支持，使得异步操作更加简单。

五、选择合适的提交方式

比较不同提交方式的优缺点

使用XHR对象、Fetch API、虚拟表单和第三方库（如Axios）各有优缺点。XHR对象较为底层，代码复杂；Fetch API现代且易用，但不支持IE；虚拟表单模拟真实表单提交，但代码冗长；第三方库如Axios简洁且功能丰富，但需额外安装。

根据需求选择合适的提交方式

根据具体需求选择合适的提交方式。如果需要兼容性，XHR对象可能是最佳选择；如果希望代码简洁，Fetch API和Axios是不错的选择；如果需要模拟表单提交行为，虚拟表单是一种解决方案。

总结来说，使用Fetch API是现代Web开发中提交数据的推荐方式，其简洁、易用且功能强大。如果需要更高级的功能或更好的兼容性，可以考虑使用其他方法。无论选择哪种方法，都需确保代码的可维护性和可读性。