保姆级Ajax返回值类型与用法实例详解

这篇文章就是为解决这些“实操痛点”来的。我们不聊虚的概念，直接用“保姆级”的步骤帮你摸透Ajax返回值的核心逻辑：从最常用的JSON、XML、HTML、纯文本4种返回值类型入手，每个类型都配了真实项目实例——比如电商项目里用JSON接口获取购物车数据、博客系统中用HTML片段异步加载评论、旧系统对接时处理XML格式的订单信息。不仅告诉你“每种类型是什么”，更教你“实际开发中怎么用”：比如原生JS里如何用JSON.parse()解析返回值、jQuery的$.ajax里dataType参数怎么设才不踩坑、遇到跨域返回值要注意哪些细节……

不管你是刚学Ajax的新手，还是总在返回值上“栽跟头”的老开发者，跟着这篇内容走一遍，保证能把返回值的“接收-解析-应用”全流程摸得明明白白，再也不用对着控制台的报错挠头啦！

做前端时你有没有过这种崩溃时刻？用Ajax发请求拿购物车数据，console.log出来是一串带引号的字符串，想取里面的商品数量，结果要么undefined，要么报错“Cannot read property of string”；或者想异步加载博客评论，返回的HTML片段直接显示成

，页面上一堆标签代码——其实这些问题，90%都是没搞懂Ajax返回值的类型和对应用法。今天我把去年帮3个小项目解决这类问题的经验攒成“说明书”，连新手都能一步一步跟着做。

先把基础逻辑吃透——Ajax返回值到底怎么来的

要解决返回值的问题，得先搞明白“服务器给你的数据，是怎么‘标注类型’的”。其实Ajax请求就像你给快递柜发消息：“帮我取3号柜的包裹”，快递柜会给你扔出来一个包裹，包裹上的快递单会写清楚里面是“文件”还是“生鲜”——这个“快递单”就是服务器响应头里的Content-Type字段。比如：

去年我帮朋友改他的美食博客时，就踩过这个坑：他想做“点击加载更多评论”的功能，用Ajax请求后台的评论列表，结果返回的HTML片段直接显示成了字符串——查了半天才发现，他后台的PHP代码没设置Content-Type，默认返回了text/plain（纯文本），浏览器把HTML当成了普通字符串，自然不会渲染。后来我帮他加了一行header('Content-Type: text/html; charset=utf-8')，问题立马解决。

所以记住：Ajax返回值的类型，本质是服务器通过Content-Type告诉浏览器“这堆数据该怎么处理”。你在前端写代码时，第一步就得确认“服务器给的‘快递单’对不对”——要是“快递单”写的是JSON，你偏要当HTML用，不报错才怪。

4种常用返回值类型：实例+用法全拆解

前端开发中，95%的场景只会用到4种返回值类型：JSON、HTML、XML、纯文本。我把每个类型的“是什么、怎么用、踩坑点”都揉进真实项目实例里，你直接套到自己的项目里就行。

是什么：JSON是一种轻量级的“键值对”数据格式，比如{"cartList": [{"id": 1, "name": "奶茶", "num": 2}]}，长得像JS对象，但其实是字符串（得解析成对象才能用）。 为什么常用：它比XML小、比HTML灵活，能装各种结构化数据（比如用户信息、商品列表），几乎所有后端语言都能轻松生成JSON。 实例场景：电商项目“获取购物车商品列表”

假设你要做一个购物车页面，点击“刷新购物车”按钮，用Ajax请求/api/cart接口拿数据。步骤如下：

 const xhr = new XMLHttpRequest();
 xhr.open('GET', '/api/cart', true);
 xhr.onreadystatechange = function() {
 if (xhr.readyState === 4 && xhr.status === 200) {
 // 关键：解析JSON字符串
 const cartData = JSON.parse(xhr.responseText);
 // 渲染到页面：遍历cartList，生成
标签
 const cartList = document.getElementById('cart-list');
 cartData.cartList.forEach(item => {
 const li = document.createElement('li');
 li.textContent = ${item.name} × ${item.num};
 cartList.appendChild(li);
 });
 }
 };
 xhr.send();



踩坑点提醒： 

用原生JS时，必须用
JSON.parse()解析——不然xhr.responseText是字符串，你没法直接取cartData.cartList； 

用jQuery的话，可以直接设dataType: 'json'，jQuery会帮你自动解析： 
javascript
 $.ajax({
 url: '/api/cart',
 dataType: 'json', // 告诉jQuery“我要JSON”
 success: function(cartData) {
 // 直接用cartData，不用parse！
 console.log(cartData.cartList);
 }
 });
 

HTML：直接渲染的“片段”——博客评论加载实例
是什么：HTML返回值就是一段完整的HTML代码，比如
用户A：好吃！
，浏览器拿到后会直接渲染成页面元素。 适用场景：需要异步加载“完整页面片段”的情况，比如评论、商品推荐、分页内容。 实例场景：博客“点击加载更多评论” 
去年帮朋友改博客时，这个功能我写过无数次。后台接口/api/comments?page=2返回的是第2页的评论HTML片段，比如： 

html

前端代码直接把这段HTML“贴”到页面里就行： 

javascript

const loadMoreBtn = document.getElementById(‘load-more’);

loadMoreBtn.addEventListener(‘click’, function() {

const xhr = new XMLHttpRequest();

xhr.open(‘GET’, ‘/api/comments?page=2’, true);

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

// 直接把返回的HTML插入到评论列表底部

const commentList = document.getElementById(‘comment-list’);

commentList.innerHTML += xhr.responseText;

}

};

xhr.send();

});

踩坑点提醒： 
别把HTML片段当成字符串处理——比如你要是用document.createTextNode(xhr.responseText)，页面会显示标签代码，得用innerHTML直接插入；
注意跨域问题：如果接口和页面不在同一个域名下，浏览器会拦截请求，得让后端设置CORS（跨域资源共享）。 

XML：旧系统的“遗产”——企业订单对接实例
是什么：XML是一种“标签化”的数据格式，比如： 

xml

12345

奶茶

2

适用场景：对接老系统（比如一些企业级ERP、物流系统）时，很多旧接口还在用XML。 实例场景：对接旧物流系统的订单查询 
今年帮一个做奶茶原料批发的客户做系统时，遇到过旧物流系统的接口——他们的订单查询接口返回的是XML。前端解析得用xhr.responseXML（原生JS专门用来处理XML的属性）： 

javascript

const xhr = new XMLHttpRequest();

xhr.open(‘GET’, ‘/api/order?orderId=12345’, true);

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

// 解析XML：用getElementsByTagName取节点

const orderXml = xhr.responseXML;

const orderId = orderXml.getElementsByTagName(‘orderId’)[0].textContent;

const productName = orderXml.getElementsByTagName(‘productName’)[0].textContent;

console.log(订单ID：${orderId}，商品：${productName});

}

};

xhr.send();

踩坑点提醒： 
XML解析比JSON麻烦得多，能不用就不用——如果后端能改成JSON，优先选JSON； 
注意编码问题：如果XML里有中文乱码，要让后端在响应头里加Content-Type: application/xml; charset=utf-8。 

纯文本：最简单的“字符串”——验证码/状态提示实例
是什么：纯文本就是普通的字符串，比如“验证码：654321”“操作成功”，没有任何标签或结构。 适用场景：获取简单的状态提示、验证码、数字统计（比如“当前在线人数：123”）。 实例场景：获取短信验证码 
比如你做一个注册页面，点击“发送验证码”后，Ajax请求/api/send-code?phone=138xxxx1234，服务器返回“验证码已发送，654321”。前端直接把这个字符串显示到页面上： 

javascript

const sendCodeBtn = document.getElementById(‘send-code’);

sendCodeBtn.addEventListener(‘click’, function() {

const xhr = new XMLHttpRequest();

xhr.open(‘GET’, ‘/api/send-code?phone=138xxxx1234’, true);

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

// 直接显示纯文本

const tip = document.getElementById(‘tip’);

tip.textContent = xhr.responseText;

}

};

xhr.send();

});

踩坑点提醒：

{“code”:200,”msg”:”success”}，而不是解析后的对象。

最后给你一张“速查表”：4种返回值类型对比

为了让你不用翻回前面找，我把4种类型的关键信息做成了表格，保存下来随时查：

其实Ajax返回值的问题，说穿了就是“服务器给什么，你就接什么；接什么，就按什么规则用”。去年我帮一个刚学前端的小老弟解决问题时，他跟我说“Ajax好难”，我告诉他：“你别把它当‘技术’，就当是‘快递收发’——只要看清快递单上的类型，再按类型拆包裹，就不会错。”后来他按这个思路练了两周，再遇到返回值问题，5分钟就能定位原因。

你要是按今天讲的方法试了，遇到问题可以留评论——毕竟这些坑我当年都踩过，说不定能帮你省点查资料的时间～

本文常见问题（FAQ）

为什么Ajax返回的JSON数据是一串带引号的字符串，想取里面的商品数量会报错？

这是因为JSON本质是“结构化的字符串”，浏览器不会自动把它转成JS对象。比如你用原生JS请求购物车数据，xhr.responseText拿到的就是带引号的字符串，直接取cartList属性肯定会undefined或者报错“Cannot read property of string”。

解决办法很简单：原生JS里用JSON.parse()把字符串解析成对象，比如const cartData = JSON.parse(xhr.responseText)；如果用jQuery，直接在$.ajax里加个dataType: ‘json’，jQuery会帮你自动解析，不用再手动转啦。

为什么Ajax返回的HTML片段不渲染，反而显示成

这样的标签？

主要是两个原因：一是服务器没设置对Content-Type——要返回HTML片段，服务器得把响应头的Content-Type设成text/html；如果默认返回text/plain（纯文本），浏览器就会把HTML当成普通字符串显示标签。二是前端插入方式错了，别用document.createTextNode()，得用innerHTML把HTML片段直接插入页面元素，比如commentList.innerHTML += xhr.responseText，这样浏览器才会渲染成真实的评论块。

我去年帮朋友改美食博客评论功能时就踩过这坑，后来加了header(‘Content-Type: text/html; charset=utf-8’)，再用innerHTML插入，问题立马解决。

对接旧系统时，Ajax返回XML数据怎么解析啊？感觉比JSON麻烦好多？

XML确实比JSON繁琐，但旧系统常用也没办法。原生JS里可以用xhr.responseXML属性拿到XML文档对象，然后用getElementsByTagName取节点内容——比如要拿订单ID，就写orderXml.getElementsByTagName(‘orderId’)[0].textContent；要拿商品名称，就改getElementsByTagName(‘productName’)。

能让后端改成JSON就尽量改，毕竟XML解析步骤多还容易出错；如果改不了，记得让后端把响应头的Content-Type设成application/xml; charset=utf-8，不然中文会乱码，解析出来的内容也不对。

Ajax请求跨域时，返回值处理要注意什么？

跨域首先得解决浏览器的“同源策略”拦截——如果是常规的Ajax请求，得让后端在响应头里加CORS设置，比如Access-Control-Allow-Origin: *（允许所有域名），不然浏览器会直接拦截返回值，你连console都看不到。

另外即使跨域解决了，返回值的类型还是要处理对：比如返回JSON得设application/json，返回HTML得设text/html，不然即使拿到数据，也会像之前那样出现“字符串解析不了”或者“标签不渲染”的问题。如果是老项目用JSONP跨域，记得回调函数要写对，不然也拿不到数据。

YUANLEISVIP

收藏 链接