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

最新推荐文章于 2020-03-30 10:56:00 发布

IT程序员的日常

最新推荐文章于 2020-03-30 10:56:00 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript从入门到精通文章标签： ajax json json模拟数据 json模拟服务器数据

本文链接：https://blog.youkuaiyun.com/FengyCoder/article/details/84652368

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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%;