筑坐极_Ajax阿贾克斯Get示例

先导入

bootstrap.min.css jquery.min.js bootstrap.min.js

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

头部导航可以在网上找一个自己喜欢的格式

<!--头部导航-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">头条新闻</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">娱乐</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        下载游戏
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">你的关注</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="你的喜欢" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">查找</button>
            </form>
        </div>
    </div>
</nav>

写出一个表格样式

<div class="container-xxl">
    <div class="row">
        <div class="col-2"></div>

        <div class="col-8"><!--1头部的部分-->
        <h4 class="loading ">正在加载中...<a>.</a><a>.</a><a>.</a></h4><!--table-hide默认不显示-->
        <table class="table table-dark table-striped table-hide"><!--dark黑色,深色-table-hide隐藏-->
         <thead>
            <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>

使用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("");
            }
        }
        //利用ajax由街口获得信息
         let url= "http://106.14.192.118/query_by_page";
     $.ajax({
         url:url,
         type:"GET",
         dataType:"json",//期待的返回值类型
         data:{},//传递参数
         //若数据获取成功，则将数据展示在页面
         success:function(date){
            console.log("data");
            //从回调的数据中找到需要的部分
             let arr = date["data"]["本页内容"];
             console.log(arr);
             let htmlpart="";/*在这里创建一个变量*/
             //将数据以列表形式展示
             for(let i=0;i<arr.length;i++ ){ /*循环*/
                 let one=arr[i]; /*拿到其中一条*/
                 /*+=等于后面的字符串12加等于，相当于连加12次*/
                 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>';

               /* <td>10001</td> //因为原先的右"",所以html=是要写'',动态的地方要修改
                  <td><img src="h" alt="" class="MY-IMG"></td>
                  <td>BI</td>
                  <td>B </td>
              /*把拼接完的效果显示出来*/
              // console.log(htmlpart);

             }
             //成功获取数据后，关闭加载画面，展示表格
             console.log(htmlpart)
             $(".loading").hide();//关闭计时器
             clearInterval(timer);
             $(".table-hide").show();//让table的隐藏显示出来
             $(".tbd").append(htmlpart);//写一个追加，停掉计时器
          //获取失败，错误信息将出现在控制台
         },error:function(err){
             console.log("数据加载失败...");
         }

     })
  })
  </script>

Ajax阿贾克斯Get示例

苏林*

Ajax

Ajax阿贾克斯Get示例

2021.06.23

878人

苏林*

天津市大港区

Hot:18690

苏林*

当前作品暂无评分

还未获得评语哦~