jQuery通过Ajax返回JSON数据

想要通过Ajax返回JSON数据，需要依次完成以下步骤：

1. 建立HTML结构

首先需要在HTML页面上建立一个结构，比如一个按钮和一个展示结果的区域。

<button id="getJsonBtn">获取JSON数据</button>
<div id="resultArea"></div>

2. 引入jQuery库

在HTML页面的头部引入jQuery库，可以从官网下载或者使用CDN。

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

3. 编写Ajax请求代码

使用jQuery库提供的Ajax方法，发送请求并获取JSON数据。

$(document).ready(function(){
  $("#getJsonBtn").click(function(){
    $.ajax({
      url: "test.json", //JSON文件的url地址
      dataType: "json", //返回的数据格式
      type: "get", //请求方式
      success: function(data){
        //请求成功时处理
        $("#resultArea").html(JSON.stringify(data));
      },
      error: function(){
        //请求出错处理
        alert('请求失败！');
      }
    });
  });
});

示例1：从本地文件获取JSON数据

假设我们有一个本地的JSON文件，名为test.json。

{
  "name": "张三",
  "age": 18,
  "hometown": "北京市"
}

点击按钮，就可以通过Ajax获取并展示这个JSON文件的内容。

$(document).ready(function(){
  $("#getJsonBtn").click(function(){
    $.ajax({
      url: "test.json",
      dataType: "json",
      type: "get",
      success: function(data){
        $("#resultArea").html(JSON.stringify(data));
      },
      error: function(){
        alert('请求失败！');
      }
    });
  });
});

示例2：从接口获取JSON数据

假设我们有一个接口，返回的是一个JSON格式的数据。

{
  "user": {
    "name": "李四",
    "age": 20,
    "hometown": "上海市"
  }
}

点击按钮，就可以通过Ajax获取并展示这个接口返回的JSON数据。

$(document).ready(function(){
  $("#getJsonBtn").click(function(){
    $.ajax({
      url: "http://example.com/getJson.php", //接口的url地址
      dataType: "json",
      type: "get",
      success: function(data){
        $("#resultArea").html(JSON.stringify(data));
      },
      error: function(){
        alert('请求失败！');
      }
    });
  });
});

注：由于涉及到跨域问题，实际情况中需要在后端设置允许跨域访问的header头。