get方法学习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
      * {
        text-align: center;
        font-size: 20px;
      }
      .title {
        text-align: center;
      }
      .width {
        width: 1200px;
      }
      tr {
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2 class="title">省份表</h2>
    <table class="width" id="tableId" border="1" align="center" cellspacing="0">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>首字母</th>
          <th>拼音</th>
          <th>精度</th>
          <th>维度</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
        
     //  $.get("https://www.php.cn/",{},function(e,status){
     //    console.log(e); 
     //  }); 

    //  $.get("https://www.baidu.com/",{},fuction(e,status){
    //     console.log(e);
    //  });

    
    </script>
  </html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
      * {
        text-align: center;
        font-size: 20px;
      }
      .title {
        text-align: center;
      }
      .width {
        width: 1200px;
      }
      tr {
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2 class="title">省份表</h2>
    <table class="width" id="tableId" border="1" align="center" cellspacing="0">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>首字母</th>
          <th>拼音</th>
          <th>精度</th>
          <th>维度</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
  <script>
        // 情求服务器上的省列表
        // url：http://admin.ouyangke.cn/index.php/api/index/prov_list
        $.get(
            "http://admin.ouyangke.cn/index.php/api/index/prov_list",
            {},
            function(data,status){
                console.log(data);
                console.log(status);
                let html_data = " ";

                console.log(data,data);

                for(let i=0; i <data.data.length; i++){
                  // html_data +="<tr>";
                  // html_data +="<th>1</th>"
                  // html_data +="<td>北京</td>";
                  // html_data +="<td>B</td>";
                  // html_data +="<td>beijiing</td>";
                  // tml_data +="<td>1.22</td>";
                  // html_data +="<td>0.22</td>";
                  // html_data +="</tr>";


                  html_data +="<tr>";
                  html_data +="<th>"+ data.data[i].area_id + "</th>";
                  html_data +="<td>"+ data.data[i].area_name + "</td>";
                  html_data +="<td>"+ data.data[i].pingyin + "</td>";
                  html_data +="<td>"+ data.data[i].firsst_pinyin + "</td>";
                  html_data +="<td>"+ data.data[i].lng + "</td>";
                  html_data +="<td>"+ data.data[i].lat + "</td>";
                  html_data +="</tr>";
 

                    
                }

                $("#tbody").append(html_data);
            },
            "json"
        );
        // {code:0, msg:"成功"，count：35，data:Array(10)}
        // js,jq,{}是对象，也是json的格式。{}符号和json的一样
        // json数据，code是下标，0是值
        // msg是下标，成功是值
        // {
        //   // code:0,//数字
        //   // msg:"成功"，//字符串
        //   // data：[]//数字
        // }
  </script>
    </html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
      * {
        text-align: center;
        font-size: 20px;
      }
      .title {
        text-align: center;
      }
      .width {
        width: 1200px;
      }
      tr {
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2 class="title">省份表</h2>
    <table class="width" id="tableId" border="1" align="center" cellspacing="0">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>首字母</th>
          <th>拼音</th>
          <th>精度</th>
          <th>维度</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <a href="8.html">下一页</a>
  </body>
  <script>
    //   示例
    // 咱们在做静态页面，但是把页面给php程序员使用，它不会用这么多页面
    // 它只会用1个页面，然后通过代码，进行翻页，把page这个参数的值(1)，作为变量
    // 我们这样做静态翻页，也是有用的。在给数据不经常更新，使用静态页面的好处，是访问快。
    // php代码要经过服务器，服务器要处理，要看这台服务器的速度，因为服务器就是电脑。
    // 所以它会有快有慢，而且要花钱购买，越快服务器，花的钱越多。
    $.get(
      "http://admin.ouyangke.cn/index.php/api/index/prov_list",
      {
        page: 1,
        limit: 5,
      },
      function (data, status) {
        let html_data = "";

        console.log(data.data);

        // i 第一次是0，第二次是 1，第三次是2
        for (let i = 0; i < data.data.length; i++) {
          html_data += "<tr>";
          html_data += "<th>" + data.data[i].area_id + "</th>";
          html_data += "<td>" + data.data[i].area_name + "</td>";
          html_data += "<td>" + data.data[i].pinyin + "</td>";
          html_data += "<td>" + data.data[i].first_pinyin + "</td>";
          html_data += "<td>" + data.data[i].lng + "</td>";
          html_data += "<td>" + data.data[i].lat + "</td>";
          html_data += "</tr>";
        }

        $("tbody").append(html_data);
      },
      "json"
    );
  </script>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
      * {
        text-align: center;
        font-size: 20px;
      }
      .title {
        text-align: center;
      }
      .width {
        width: 1200px;
      }
      tr {
        height: 50px;
      }
    </style>
  </head>
  <body>
     <h2 class="title">省份表</h2>
     <table class="width" id="tableId" border="1" align="center" cellspacing="0">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>首字母</th>
          <th>拼音</th>
          <th>精度</th>
          <th>维度</th>
        </tr>
      </thead>
      <tbody></tbody>
     </table>
    <body>
    <script>
        // 接口数据
        // 接口参数：（你买水果和牛奶）
        // "http://admin.ouyangke.cn/index.php/api/index/prov_list",
        // 参数：
        //   page  当前页数  ，默认是1 第一页
        //   limit 一页有多少条，默认10条
        //   fields 排列字段，默认是编号排序
        //   order 排序值，asc正序（默认），desc倒序
        $.get(
            "http://admin.ouyangke.cn/index.php/api/index/prov_list",
            {
                fields:"pinyin",
                order:"desc",
            },
            function(data,status){
                console.log(data);
                console.log(status);
                let html_data = " ";

                console.log(data,data);
                
                // i第一次是0，第二次是1，第三次是2
                for(let i=0; i <data.data.length; i++){

                  html_data +="<tr>";
                  html_data +="<th>"+ data.data[i].area_id + "</th>";
                  html_data +="<td>"+ data.data[i].area_name + "</td>";
                  html_data +="<td>"+ data.data[i].pingyin + "</td>";
                  html_data +="<td>"+ data.data[i].firsst_pinyin + "</td>";
                  html_data +="<td>"+ data.data[i].lng + "</td>";
                  html_data +="<td>"+ data.data[i].lat + "</td>";
                  html_data +="</tr>";
 

                    
                }

                $("#tbody").append(html_data);
            },
            "json"
        ); 
    </script>
    </html>

posted @ 2024-06-26 18:58 豹纹守宫阅读(21) 评论(0) 收藏举报

刷新页面返回顶部

get方法学习

公告