怎么用浏览器发送json

在这个数字化时代，我们经常需要与各种在线服务交互，其中一种常见的数据交换格式就是JSON（JavaScript Object Notation），JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，如果你想要通过浏览器发送JSON数据，应该怎么做呢？别急，我来一步步告诉你。

你需要了解的是，通过浏览器发送JSON数据通常涉及到两种主要的技术：AJAX（Asynchronous JavaScript and XML）和Fetch API，AJAX是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术，而Fetch API则是一个现代的网络API，提供了一个更简洁和功能强大的方法来异步请求资源。

使用AJAX发送JSON

在早期的Web开发中，AJAX是发送JSON数据的常用方法，你可以使用XMLHttpRequest对象来发送请求，下面是一个简单的例子：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'your-api-url', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
var data = JSON.stringify({key: 'value'});
xhr.send(data);

在这个例子中，我们首先创建了一个XMLHttpRequest对象，然后打开一个POST请求到指定的URL，我们设置了请求头Content-Type为application/json，这样服务器就知道我们发送的是JSON格式的数据，我们将JavaScript对象转换为JSON字符串，并发送出去。

使用Fetch API发送JSON

Fetch API提供了一个更现代和简洁的方式来发送请求，它的语法更加清晰，而且内置了Promise支持，使得异步操作更加方便，下面是一个使用Fetch API发送JSON数据的例子：

fetch('your-api-url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({key: 'value'})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个例子中，我们使用fetch函数发送一个POST请求，我们指定了请求的方法、头部和体，头部中指定了Content-Type为application/json，而体则是一个JSON字符串。fetch函数返回一个Promise，我们可以通过链式调用.then()和.catch()来处理响应和错误。