如何在ajax中传递json

今天来聊聊如何在AJAX中传递JSON,这个话题对于前端开发者来说可是非常重要的哦！相信很多人在开发过程中都会遇到这个需求，那么我们就一起来探讨一下吧！

我们要知道AJAX是一种在后台与服务器交换数据的技术,不需要重新加载整个页面，而JSON呢，是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

在AJAX中传递JSON,主要涉及到两个方法：POST和GET，我将详细为大家介绍这两种方法。

使用POST方法传递JSON

在使用POST方法传递JSON时,我们需要设置请求头和请求体，创建一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

设置请求的类型为POST,以及请求的URL：

xhr.open('POST', '/your-api-url');

我们要设置请求头,告诉服务器我们发送的是JSON格式的数据：

如何在ajax中传递json

xhr.setRequestHeader('Content-Type', 'application/json');

我们可以发送请求了,在发送之前，需要将JSON数据转换为字符串：

var data = {
  name: '张三',
  age: 25
};
xhr.send(JSON.stringify(data));

我们监听响应事件,获取服务器返回的数据：

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

使用GET方法传递JSON

使用GET方法传递JSON相对简单一些,因为GET方法通常用于请求数据，而不是发送数据，创建一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

设置请求的类型为GET,以及请求的URL，这里我们将JSON数据作为查询参数拼接在URL后面：

var url = '/your-api-url?name=张三&age=25';
xhr.open('GET', url);

直接发送请求：

xhr.send();

同样,监听响应事件，获取服务器返回的数据：

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};