筑坐极_Ajax阿贾克斯Get示例

效果图放在最前面 bling~

Ajax阿贾克斯Get示例

准备阶段:

导入bootstrap.min.css bootstrap.min.js jquery.min.js

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

路径要根据每个人的文件所在位置自己写噢!

如果没有它们的话,使用npm install安装一下~

表格部分先写出大概样式

<!--响应式布局-->
<div class="row">
  <div class="col-2"></div> 
  <div class="col-8">
    <table class="table table-dark table-striped table-hide">
      <!--表头内容-->
      <thead>
      <tr>
        <th>案例编号</th>
        <th>封面图</th>
        <th>标题</th>
        <th>描述</th>
      </tr>
      </thead>
      <!--表格内容-->
      <tbody>
        <tr>
          <td>10001</td>
          <td><img src="http://106.14.192.118/static/case/3.jpg" alt="" class="MY-IMG"></td>
          <td>BITONE X CSD | 跨洋打造过滤设备可视化解决方案</td>
          <td>BITONE坚持为行业提供高品质影像内容的创意与制作
          感谢客户的信任，感谢团队伙伴的不懈努力</td>
        </tr>
        <tr>
          <td>10001</td>
          <td><img src="http://106.14.192.118/static/case/3.jpg" alt="" class="MY-IMG"></td>
          <td>BITONE X CSD | 跨洋打造过滤设备可视化解决方案</td>
          <td>BITONE坚持为行业提供高品质影像内容的创意与制作
          感谢客户的信任，感谢团队伙伴的不懈努力</td>
        </tr>
        <tr>
          <td>10001</td>
          <td><img src="http://106.14.192.118/static/case/3.jpg" alt="" class="MY-IMG"></td>
          <td>BITONE X CSD | 跨洋打造过滤设备可视化解决方案</td>
          <td>BITONE坚持为行业提供高品质影像内容的创意与制作
          感谢客户的信任，感谢团队伙伴的不懈努力</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-2"></div>
</div>

<style>
  .MY-IMG{
    width: 50%;
    height: auto;
  }
</style>

Ajax阿贾克斯Get示例使用Ajax请求加载远程数据

<script>
  $(function () {
    $.ajax({
      url: "http://106.14.192.118/query_by_page",
      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>';
        }
        $(".tbd").append(htmlPart);
      },
      error: function (err) {
        console.log("数据加载失败...");
      }
    })
  })
</script>

所以上面的内容也需要修改一下噢!

<!--表格内容-->
<tbody class="tbd">
</tbody>

再刷新页面就变成这样啦:

Ajax阿贾克斯Get示例

但是! 你以为这就完了???一点都不细节好吧!!! 页面加载数据是需要时间的, 所以安排一个"数据加载中..."

<h4 class="loading">数据加载中<a>.</a><a>.</a><a>.</a></h4>
<table class="table table-dark table-striped table-hide">

<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("");
      }
    }
    $.ajax({
      url: "http://106.14.192.118/query_by_page",
      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>

<style>
  .MY-IMG{
    width: 50%;
    height: auto;
  }
  .loading{
    text-align: center;
    margin-top: 20px
  }
  .loading>a{
    display: inline-block;
    width: 10px;
    height: 10px;
  }
</style>

这个时候再刷新页面, 在表格内容出来之前,就会显示"数据加载中..."啦~/注意后面的3个点点是会动的噢!

Over~

Ajax阿贾克斯Get示例

韩佳*

Ajax

Ajax阿贾克斯Get示例

2021.06.23

869人

韩佳*

天津市南开区

Hot:20459

韩佳*

当前作品暂无评分

还未获得评语哦~