筑坐极_Ajax阿贾克斯Get示例

根据npm i 安装

bootstrap 和 jquery

然后导入文件

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>

html样式

<body>
<div class="container-xxl">
  <div class="row">
    <div class="col-2"></div>
    <div class="col-8">
      <h4 class="loading">数据加载中<a>.</a><a>.</a><a>.</a></h4>
      <table class="table table-dark table-striped table-hide">
        <thead>
        <tr>
          <th>案例编号</th>
          <th>封面图</th>
          <th>标题</th>
          <th>描述</th>
        </tr>
        </thead>
        <tbody class="tbd"></tbody>
      </table>
    </div>
    <div class="col-2"></div>
  </div>
</div>


</body>

css

.MY-IMG {
    width: 50%;
    height: auto;
  }

  .table-hide {
    display: none;
  }

  .loading {
    text-align: center;
    margin-top: 18px;
  }

  .loading > a {
    display: inline-block;
    width: 10px;
    height: 10px;
  }

Ajax请求加载远程数据

<script>

  $(function () {
    let now = 3;

    let timer = setInterval(function () {
      now++;
      if (now === 4) {
        now = 0;
      }
      changeDot(now);
    }, 300);


    function changeDot(n) {
      if (n === 3) {
        $(".loading>a").eq(0).text(".");
        $(".loading>a").eq(1).text(".");
        $(".loading>a").eq(2).text(".");
      } else if (n === 2) {
        $(".loading>a").eq(0).text(".");
        $(".loading>a").eq(1).text(".");
        $(".loading>a").eq(2).text("");
      } else if (n === 1) {
        $(".loading>a").eq(0).text(".");
        $(".loading>a").eq(1).text("");
        $(".loading>a").eq(2).text("");
      } else {
        $(".loading>a").text("");
      }
    }

    let url = "http://106.14.192.118/query_by_page";
    $.ajax({
      url: url,
      type: 'GET',
      dataType: 'json',
      data: {},
      success: function (data) {
        console.log("data:");
        let arr = data["data"]["本页内容"];
        console.log(arr);

        let htmlPart = "";

        for (let i = 0; i < arr.length; i++) {
          let one = arr[i];
          htmlPart += '<tr><td>' + one['id'] + '</td><td><img src="' + one['pic'] + '" alt="" class="MY-IMG"></td><td>' + one['title'] + '</td><td>' + one['des'] + '</td></tr>';
        }

        $('.loading').hide();
        clearInterval(timer);
        $('.table-hide').show();
        $('.tbd').append(htmlPart);

      },
      error: function (err) {
        console.log('数据加载失败...');

      }
    })


  })


</script>

最后页面显示及控制台打印的数据

Ajax阿贾克斯Get示例

Ajax阿贾克斯Get示例

朱明*

解梦

Ajax阿贾克斯Get示例

2021.06.23

761人

朱明*

天津市宁河县

Hot:16067

朱明*

当前作品暂无评分

还未获得评语哦~