菜鸟教程
教程 jquery tutorial

JSON 处理

JSON（JavaScript Object Notation）是一种轻量级的数据格式，广泛用于前后端数据传输。jQuery 在处理 AJAX 返回的数据时，常使用 JSON 格式。

JSON 的结构

JSON 是一种键值对结构的数据格式，例如：

json 
{
  "name": "小明",
  "age": 20,
  "skills": ["HTML", "CSS", "JavaScript"]
}

解析 JSON 字符串为对象

使用 JSON.parse() 方法：

js 
var jsonStr = '{"name":"小红","age":22}';
var obj = JSON.parse(jsonStr);
console.log(obj.name); // 输出：小红

如果服务器返回的是 application/json 类型数据，jQuery 会自动将其转换为对象：

js 
$.get("user.json", function (data) {
  console.log(data.name); // 不需要手动解析
});

转换对象为 JSON 字符串

使用 JSON.stringify() 方法：

js 
var obj = { name: "小刚", age: 28 };
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);
// 输出：{"name":"小刚","age":28}

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    $("#btnParse").click(function () {
      var jsonStr = '{"title":"jQuery 教程","level":"入门"}';
      var data = JSON.parse(jsonStr);
      $("#output").text("标题：" + data.title + "，级别：" + data.level);
    });

$(&quot;#btnStringify&quot;).click(function () {
  var obj = { site: &quot;p6p.net&quot;, type: &quot;前端资源&quot; };
  var str = JSON.stringify(obj);
  $(&quot;#output&quot;).text(str);
});



});
</script>


<button id="btnParse">解析 JSON 字符串</button>
<button id="btnStringify">对象转 JSON 字符串</button>
<div id="output" style="margin-top: 10px"></div>

相关内容