通过Ajax进行Post提交Json数据的方法

当我们需要在前端用javascript发送POST请求时，因为请求是异步的，所以可以借助Ajax来实现。如果请求的数据格式是JSON，那么需要注意的是，需要将JSON对象转化为字符串再进行POST请求。下面给出了两个实例来说明如何通过Ajax进行POST提交JSON数据的方法。

方法一：使用XMLHttpRequest对象

// 构造XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// POST请求地址
var url = '/api/users';

// 构造数据
var data = {
    'name': '小明',
    'age': 18,
    'gender': 'male'
}

// 将JS对象转化为JSON字符串
var jsonData = JSON.stringify(data);

// 发送POST请求
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/json;charset=utf-8');
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(jsonData);

方法二：使用jQuery

// POST请求地址
var url = '/api/users';

// 构造数据
var data = {
    'name': '小红',
    'age': 20,
    'gender': 'female'
}

// 将JS对象转化为JSON字符串
var jsonData = JSON.stringify(data);

// 使用jQuery发送POST请求
$.ajax({
    url:url,
    type: "POST",
    data:jsonData,
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    success:function(result){
        console.log(result);
    },
    error:function(err){
        console.log(err);
    }
});

以上两个实例通过不同方式展示了如何通过Ajax进行POST提交JSON数据的方法，同时需要注意的是，在发送POST请求时需要设置请求头的Content-type为application/json。