ajax传json，前后说白了就是台传让网页不刷新就能跟服务器交换数据。前端塞一个对象过去，实例后端接住，前后再扔回来一个对象，台传前端拿到手直接渲染。实例看起来简单，前后但真写起来，台传坑都在细节里。实例

先看最简单的前后GET请求。你有一个按钮，台传点一下要从服务器拿用户信息。实例原生写法是前后这样：

var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/user?id=123', true); xhr.onreadystatechange = function() {  if (xhr.readyState === 4 && xhr.status === 200) {  var data = JSON.parse(xhr.responseText); document.getElementById('name').innerHTML = data.name; } }; xhr.send(); 

这段代码里最关键的一行是JSON.parse。服务器返回的台传responseText本质是字符串，你不转成对象就取不到data.name。实例我见过不少人卡在这一步，console.log出来明明有内容，一取属性就是undefined，急得满头汗——其实就少了这个parse。

POST请求更麻烦一点。你要往服务器提交数据，得先把JS对象转成JSON字符串，用JSON.stringify。然后还有个隐形坑：Content-Type必须设置成application/json，不然后端按表单格式解析，拿到手是空的。

var user = { name: '张三', age: 28}; var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/user', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() {  if (xhr.readyState === 4) {  var result = JSON.parse(xhr.responseText); console.log(result.status); } }; xhr.send(JSON.stringify(user)); 

这里有个容易忽略的细节：send()里面传的必须是字符串，不是对象。你要是图省事直接send(user)，浏览器会帮你转成[object Object]这种鬼东西发出去，后端收到直接懵。

用jQuery写就省心多了。它把这些都封装好了，你只需要告诉它数据类型：

$.ajax({  url: '/api/user', type: 'POST', data: JSON.stringify({ name: '李四', age: 30}), contentType: 'application/json', dataType: 'json', success: function(res) {  alert('保存成功，ID为' + res.id); }, error: function(xhr, status, error) {  console.log('出错了：' + error); } }); 

注意dataType: 'json'这个参数。它告诉jQuery，服务器返回的是JSON，会自动帮你parse好。你直接拿res当对象用就行。但这里有个陷阱：如果服务器返回的Content-Type不是application/json，就算你写了dataType，jQuery也可能给你返回字符串。所以后端同事配合很重要，别光顾着前端写。

实际项目里，我更推荐用axios。它基于Promise，处理异步逻辑比回调函数清晰得多。而且axios会自动根据你传的data对象设置Content-Type，不用手动指定。

axios.post('/api/user', { name: '王五', age: 25}) .then(function(response) {  console.log(response.data); // response.data已经是解析好的对象 }) .catch(function(error) {  console.error('请求失败', error); }); 

axios有个好处是它默认把返回数据放在response.data里，不像原生XHR还要自己parse。它还会把HTTP状态码非2xx的都扔到catch里，错误处理更统一。

最后说个我踩过的坑。有一次前端怎么调都报错，后端说收到了但解析失败。查了半天发现是编码问题——我传的中文没经过encodeURIComponent，某些特殊字符在传输过程中被转义了。后来统一用encodeURIComponent包一层，或者干脆全用UTF-8，问题就消失了。

ajax传json就是这么回事：字符串和对象之间来回倒腾，协议头别搞错，编码统一。把这几点记住，基本就顺畅了。剩下的就是调试时多开F12看Network面板，那里能看到实际发送和接收的原始数据，比瞎猜快得多。