ajax 前端传 json对象

Ajax（Asynchronous JavaScript + XML）是指利用JavaScript在保持网页不被刷新的情况下，使用异步方式向服务器发起请求和接收返回的数据，并能够动态地更新页面的技术。

在前端开发中，我们常常需要传递JSON（JavaScript Object Notation）对象来请求或发送数据，以达到更好的用户体验和交互效果。下面我们来看一下如何使用Ajax在前端传递JSON对象。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 监听状态变化，并处理响应数据
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

// 设置请求参数及请求方式
var url = 'http://example.com/api';
var method = 'POST';

// 设置请求头
xhr.setRequestHeader('Content-Type','application/json');

// 准备数据对象
var dataObj = {
  name: '张三',age: 18,gender: '男'
};

// 将数据对象转为JSON字符串
var dataJson = JSON.stringify(dataObj);

// 发送请求
xhr.open(method,url,true);
xhr.send(dataJson);

在以上例子中，我们首先创建了XMLHttpRequest对象，然后设置了该请求的参数、请求方式和请求头。接着，我们准备了一个数据对象，并使用JSON.stringify()方法将其转为JSON字符串，然后发送请求。在对响应数据的处理中，我们使用JSON.parse()方法将响应数据转为JSON对象进行处理。

通过上述的介绍，我们可以看到，在前端传递JSON对象时，我们需要注意设置请求头为‘Content-Type: application/json’，同时要将对象转为JSON字符串进行发送，而在接收响应数据时，我们要将数据转为JSON对象进行处理。