【前端】jQuery加载JSON文件并赋值方法

在jQuery中，可以通过AJAX方法加载JSON文件内容并赋值给变量。以下是两种常用方法：

方法1：使用 $.getJSON()（推荐）

let a; // 声明变量

$.getJSON("yourfile.json")
  .done(function(data) {
    a = data; // 成功时赋值
    console.log("赋值成功:", a);
  })
  .fail(function() {
    console.error("加载JSON失败");
  });

方法2：使用 $.ajax()（更灵活）

let a; // 声明变量

$.ajax({
  url: "yourfile.json",
  dataType: "json",
  success: function(data) {
    a = data; // 成功时赋值
    console.log("赋值成功:", a);
  },
  error: function(xhr, status, err) {
    console.error("加载失败:", status, err);
  }
});

关键注意事项：

1. 异步特性：AJAX请求是异步的，赋值操作在回调函数内完成，不能在请求后立即使用变量：

   // 错误示例（此时a尚未赋值）：
   $.getJSON("file.json", function(data) { a = data; });
   console.log(a); // 输出 undefined
   
   // 正确用法：
   $.getJSON("file.json", function(data) {
     a = data;
     useVariableA(); // 在此处或内部调用后续逻辑
   });
   

2. 文件路径：

   • 确保路径正确（相对路径或绝对路径）
   • 跨域请求需服务器设置CORS支持

3. 等效原生JS方案（无需jQuery）：

fetch("yourfile.json")
  .then(response => response.json())
  .then(data => {
    a = data;
    console.log(a);
  });

完整示例：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  let jsonData; // 存储JSON数据的变量

  // 加载JSON文件
  $.getJSON("data.json")
    .done(function(data) {
      jsonData = data;
      console.log("加载完成:", jsonData);
      
      // 在此处使用jsonData
      $("#result").text(JSON.stringify(jsonData));
    })
    .fail(function() {
      console.error("请检查文件路径或网络连接");
    });
});
</script>

<div id="result">加载中...</div>

重要提示：实际开发中应避免使用同步请求（async: false已废弃），强制同步会导致浏览器界面冻结。始终使用回调/Promise处理异步数据。