利用JSON模拟数据，ajax获取并返回，显示在网页

最新推荐文章于 2022-11-22 15:24:40 发布

原创

最新推荐文章于 2022-11-22 15:24:40 发布 · 2.5k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #json #json模拟数据 #json模拟服务器数据

本文介绍了如何利用JSON模拟数据，并通过AJAX请求获取这些数据，最后将数据在网页上进行展示。示例中展示了JSON结构以及对应的HTML展示部分，实现了模拟数据的动态加载和呈现。

JSON：

{
  "air":[
    {
      "id":1,
      "city":"杭州",
      "airport":"杭州机场"
    },
    {
      "id":2,
      "city":"上海",
      "airport":"浦东机场"
    },
    {
      "id":3,
      "city":"北京",
      "airport":"首都机场"
    },
    {
      "id":4,
      "city":"成都",
      "airport":"成都机场"
    },
    {
      "id":5,
      "city":"南京",
      "airport":"南京机场"
    },
    {
      "id":6,
      "city":"天津",
      "airport":"天津机场"
    }
  ]
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>json模拟数据</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 800px;
            margin: 200px auto;
            padding: 30px 0;
            border: 1px dashed #272627;
        }

        .test {
            width: 100%;