修改省、删除省

作业标题：0723作业
作业内容：大作业 1、修改省 - 获取省份：http://admin.ouyangke.cn/index.php/api/index/prov_one - 修改接口：http://admin.ouyangke.cn/index.php/api/index/prov_edit 2、删除省 - 删除接口：http://admin.ouyangke.cn/index.php/api/index/prov_del

  • 删除

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>Document</title>
    8.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    9.   <style>
    10.     * {
    11.       text-align: center;
    12.       font-size: 20px;
    13.     }
    14.     .title {
    15.       text-align: center;
    16.     }
    17.     .width {
    18.       width: 1200px;
    19.     }
    20.     tr {
    21.       height: 50px;
    22.     }
    23.   </style>
    24. </head>
    25. <body>
    26.   <h2 class="title">省份表</h2>
    27.   <div style="margin: 20px 200px; text-align: right">
    28.     <button id="add">添加</button>
    29.   </div>
    30.   <table class="width" id="tableId" border="1" align="center" cellspacing="0">
    31.     <thead>
    32.       <tr>
    33.         <th>编号</th>
    34.         <th>名称</th>
    35.         <th>首字母</th>
    36.         <th>拼音</th>
    37.         <th>精度</th>
    38.         <th>维度</th>
    39.         <th colspan="2">编辑</th>
    40.       </tr>
    41.     </thead>
    42.     <tbody></tbody>
    43.   </table>
    44.   <div style="margin-top: 20px">
    45.     <button id="lower">更多</button>
    46.   </div>
    47. </body>
    48. <script>
    49.   //   $.ajax()   ajax的异步http 请求
    50.   // $.get() 和 $.post() 方法都使用 $.ajax
    52.   // function get(url,data,fun,type){
    53.   // url 处理
    54.   // data 处理
    55.   // fun 处理
    56.   // type 处理
    57.   // $.ajax(url,data,fun,type)
    58.   // }
    60.   // 因为get 和post方法，可以快速去执行，方便我们写代码
    62.   // $.ajax({
    63.   //     key : value,
    64.   //     key : value,
    65.   //     key : value,
    66.   //     key : value,
    67.   //     key : value,
    68.   //     key : value
    69.   // })
    70.   // key 就是参数
    72.   // url     必需、请求的接口
    73.   // data        给接口的数据、参数
    74.   // type        get、post
    75.   // async    是否要异步处理，布尔值，true异步，false同步
    76.   // dataType       服务器的数据类型
    77.   // timeout         超时时间 ，毫秒。 2000，如果2秒，这个接口没有反应，这个请求就停止
    79.   // success(data,status)  请求成功的方法
    80.   // error(data,status)    请求失败的方法
    81.   // complete(data,status)   不管成功还是失败，都会执行
    82.   var js_page = 1;
    83.   data(js_page);
    84.   $("#lower").click(function () {
    85.     js_page = js_page + 1;
    86.     data(js_page);
    87.   });
    88.   function data(js_page) {
    89.     $.ajax({
    90.       url: "http://admin.ouyangke.cn/index.php/api/index/prov_list",
    91.       data: {
    92.         page: js_page,
    93.         limit: 10,
    94.         //order: desc,
    95.       },
    96.       type: "GET",
    97.       async: false,
    98.       dataType: "json",
    99.       timeout: 10000,
    100.       // success :function(){
    102.       // },
    103.       success(data, status) {
    104.         let html_data = "";
    105.         for (let i = 0; i < data.data.length; i++) {
    106.           html_data += "<tr>";
    107.           html_data += "<th>" + data.data[i].area_id + "</th>";
    108.           html_data += "<td>" + data.data[i].area_name + "</td>";
    109.           html_data += "<td>" + data.data[i].pinyin + "</td>";
    110.           html_data += "<td>" + data.data[i].first_pinyin + "</td>";
    111.           html_data += "<td>" + data.data[i].lng + "</td>";
    112.           html_data += "<td>" + data.data[i].lat + "</td>";
    113.           html_data +=
    114.             "<td>" +
    115.             "<button id=" +
    116.             data.data[i].area_id +
    117.             ">" +
    118.             "删除" +
    119.             "</button>" +
    120.             "</td>";
    121.           html_data +=
    122.             "<td>" +
    123.             "<button class=" +
    124.             data.data[i].area_id +
    125.             ">" +
    126.             "修改" +
    127.             "</button>" +
    128.             "</td>";
    129.           html_data += "</tr>";
    130.         }
    131.         $("tbody").append(html_data);
    132.         count = Math.ceil(data.count / 10);
    133.         console.log("天蓬");
    134.       },
    135.       //   complete(data) {
    136.       //     console.log(data);
    137.       //   },
    138.     });
    139.   }
    140.   // 异步处理：ajax这段代码，放那执行，其他代码不会受它的影响，会直接继续指向。
    142.   // 你跟你爸妈 ，周天出去玩。。 到了周天，你说有事了。
    143.   // 这个时候，有2个选择：
    144.   //     1、你爸妈 它俩去。 异步处理
    145.   //     2、你爸妈 等你处理完事（下周），在去。  同步处理
    147.   // 如果是同步处理，打印欧阳克这段代码，必须等 上面的ajax执行完了， 才会执行。
    148.   // 现在是没有等ajax执行完，它就执行了，这是 异步处理。
    149.   console.log("欧阳克");
    151.   // 改为同步处理，async:false， 就是天蓬先打印出来，欧阳克要等ajax执行完，才会被打印出来
    153.   // $.ajax 是jquery底层ajax，底层封装一个方法
    155.   // get、 post 是对ajax 进一步封装
    157.   $("#add").click(function () {
    158.     window.location.href = "7.html";
    159.   });
    161.   //删除按钮
    162.   let del_id;
    163.   $(document).click(function (e) {
    164.     // 在页面任意位置点击而触发此事件
    165.     del_id = $(e.target).attr("id"); // e.target表示被点击的目标
    166.     console.log(del_id);
    167.     if (del_id > 820307) {
    168.       $.ajax({
    169.         url: "http://admin.ouyangke.cn/index.php/api/index/prov_del",
    170.         data: {
    171.           area_id: del_id,
    172.         },
    173.         type: "POST",
    174.         async: false,
    175.         dataType: "json",
    176.         timeout: 10000,
    177.         // success :function(){
    179.         // },
    180.         success(data) {
    181.           if (data.code == 0) {
    182.             alert("success");
    183.             window.location.href = "6.html";
    184.           } else {
    185.             alert("添加失败，请重试");
    186.             return false;
    187.           }
    188.         },
    189.         //   complete(data) {
    190.         //     console.log(data);
    191.         //   },
    192.       });
    193.     }
    194.   });
    196.   //编辑按钮
    197.   let index_name;
    198.   //button[(name = "area_name")];
    199.   $(document).click(function (e) {
    200.     // 在页面任意位置点击而触发此事件
    201.     index_name = e.target.className * 1; // e.target表示被点击的目标
    202.     console.log(index_name);
    203.     if (index_name > 820307) {
    204.       alert(index_name);
    205.       $.ajax({
    206.         url: "http://admin.ouyangke.cn/index.php/api/index/prov_one",
    207.         data: {
    208.           area_id: index_name,
    209.         },
    210.         type: "POST",
    211.         async: true,
    212.         dataType: "json",
    213.         timeout: 10000,
    214.         // success :function(){
    216.         // },
    217.         success(data) {
    218.           if (data.code == 0) {
    219.             alert("success");
    220.             window.location.href = "8.html?area_id=" + index_name;
    221.           } else {
    222.             alert("添加失败，请重试");
    223.             return false;
    224.           }
    225.         },
    226.         complete(data) {
    227.           console.log(data);
    228.         },
    229.       });
    230.     }
    231.   });
    232. </script>
    233. </html>

    删除
    删除

  • 编辑（点击编辑跳转）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>Document</title>
    8.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    9.   <style>
    10.     * {
    11.       text-align: center;
    12.       font-size: 20px;
    13.     }
    14.     .title {
    15.       text-align: center;
    16.     }
    17.     .width {
    18.       width: 1200px;
    19.     }
    20.     tr {
    21.       height: 50px;
    22.     }
    23.   </style>
    24. </head>
    25. <body>
    26.   <h2 class="title">省份表</h2>
    27.   <div style="margin: 20px 200px; text-align: right">
    28.     <button id="add">添加</button>
    29.   </div>
    30.   <table class="width" id="tableId" border="1" align="center" cellspacing="0">
    31.     <thead>
    32.       <tr>
    33.         <th>编号</th>
    34.         <th>名称</th>
    35.         <th>首字母</th>
    36.         <th>拼音</th>
    37.         <th>精度</th>
    38.         <th>维度</th>
    39.         <th colspan="2">编辑</th>
    40.       </tr>
    41.     </thead>
    42.     <tbody></tbody>
    43.   </table>
    44.   <div style="margin-top: 20px">
    45.     <button id="lower">更多</button>
    46.   </div>
    47. </body>
    48. <script>
    49.   //   $.ajax()   ajax的异步http 请求
    50.   // $.get() 和 $.post() 方法都使用 $.ajax
    52.   // function get(url,data,fun,type){
    53.   // url 处理
    54.   // data 处理
    55.   // fun 处理
    56.   // type 处理
    57.   // $.ajax(url,data,fun,type)
    58.   // }
    60.   // 因为get 和post方法，可以快速去执行，方便我们写代码
    62.   // $.ajax({
    63.   //     key : value,
    64.   //     key : value,
    65.   //     key : value,
    66.   //     key : value,
    67.   //     key : value,
    68.   //     key : value
    69.   // })
    70.   // key 就是参数
    72.   // url     必需、请求的接口
    73.   // data        给接口的数据、参数
    74.   // type        get、post
    75.   // async    是否要异步处理，布尔值，true异步，false同步
    76.   // dataType       服务器的数据类型
    77.   // timeout         超时时间 ，毫秒。 2000，如果2秒，这个接口没有反应，这个请求就停止
    79.   // success(data,status)  请求成功的方法
    80.   // error(data,status)    请求失败的方法
    81.   // complete(data,status)   不管成功还是失败，都会执行
    82.   var js_page = 1;
    83.   data(js_page);
    84.   $("#lower").click(function () {
    85.     js_page = js_page + 1;
    86.     data(js_page);
    87.   });
    88.   function data(js_page) {
    89.     $.ajax({
    90.       url: "http://admin.ouyangke.cn/index.php/api/index/prov_list",
    91.       data: {
    92.         page: js_page,
    93.         limit: 10,
    94.         //order: desc,
    95.       },
    96.       type: "GET",
    97.       async: false,
    98.       dataType: "json",
    99.       timeout: 10000,
    100.       // success :function(){
    102.       // },
    103.       success(data, status) {
    104.         let html_data = "";
    105.         for (let i = 0; i < data.data.length; i++) {
    106.           html_data += "<tr>";
    107.           html_data += "<th>" + data.data[i].area_id + "</th>";
    108.           html_data += "<td>" + data.data[i].area_name + "</td>";
    109.           html_data += "<td>" + data.data[i].pinyin + "</td>";
    110.           html_data += "<td>" + data.data[i].first_pinyin + "</td>";
    111.           html_data += "<td>" + data.data[i].lng + "</td>";
    112.           html_data += "<td>" + data.data[i].lat + "</td>";
    113.           html_data +=
    114.             "<td>" +
    115.             "<button id=" +
    116.             data.data[i].area_id +
    117.             ">" +
    118.             "删除" +
    119.             "</button>" +
    120.             "</td>";
    121.           html_data +=
    122.             "<td>" +
    123.             "<button class=" +
    124.             data.data[i].area_id +
    125.             ">" +
    126.             "修改" +
    127.             "</button>" +
    128.             "</td>";
    129.           html_data += "</tr>";
    130.         }
    131.         $("tbody").append(html_data);
    132.         count = Math.ceil(data.count / 10);
    133.         console.log("天蓬");
    134.       },
    135.       //   complete(data) {
    136.       //     console.log(data);
    137.       //   },
    138.     });
    139.   }
    140.   // 异步处理：ajax这段代码，放那执行，其他代码不会受它的影响，会直接继续指向。
    142.   // 你跟你爸妈 ，周天出去玩。。 到了周天，你说有事了。
    143.   // 这个时候，有2个选择：
    144.   //     1、你爸妈 它俩去。 异步处理
    145.   //     2、你爸妈 等你处理完事（下周），在去。  同步处理
    147.   // 如果是同步处理，打印欧阳克这段代码，必须等 上面的ajax执行完了， 才会执行。
    148.   // 现在是没有等ajax执行完，它就执行了，这是 异步处理。
    149.   console.log("欧阳克");
    151.   // 改为同步处理，async:false， 就是天蓬先打印出来，欧阳克要等ajax执行完，才会被打印出来
    153.   // $.ajax 是jquery底层ajax，底层封装一个方法
    155.   // get、 post 是对ajax 进一步封装
    157.   $("#add").click(function () {
    158.     window.location.href = "7.html";
    159.   });
    161.   //删除按钮
    162.   let del_id;
    163.   $(document).click(function (e) {
    164.     // 在页面任意位置点击而触发此事件
    165.     del_id = $(e.target).attr("id"); // e.target表示被点击的目标
    166.     console.log(del_id);
    167.     if (del_id > 820307) {
    168.       $.ajax({
    169.         url: "http://admin.ouyangke.cn/index.php/api/index/prov_del",
    170.         data: {
    171.           area_id: del_id,
    172.         },
    173.         type: "POST",
    174.         async: false,
    175.         dataType: "json",
    176.         timeout: 10000,
    177.         // success :function(){
    179.         // },
    180.         success(data) {
    181.           if (data.code == 0) {
    182.             alert("success");
    183.             window.location.href = "6.html";
    184.           } else {
    185.             alert("添加失败，请重试");
    186.             return false;
    187.           }
    188.         },
    189.         //   complete(data) {
    190.         //     console.log(data);
    191.         //   },
    192.       });
    193.     }
    194.   });
    196.   //编辑按钮
    197.   let index_name;
    198.   //button[(name = "area_name")];
    199.   $(document).click(function (e) {
    200.     // 在页面任意位置点击而触发此事件
    201.     index_name = e.target.className * 1; // e.target表示被点击的目标
    202.     console.log(index_name);
    203.     if (index_name > 820307) {
    204.       alert(index_name);
    205.       $.ajax({
    206.         url: "http://admin.ouyangke.cn/index.php/api/index/prov_one",
    207.         data: {
    208.           area_id: index_name,
    209.         },
    210.         type: "POST",
    211.         async: true,
    212.         dataType: "json",
    213.         timeout: 10000,
    214.         // success :function(){
    216.         // },
    217.         success(data) {
    218.           if (data.code == 0) {
    219.             alert("success");
    220.             window.location.href = "8.html?area_id=" + index_name;
    221.           } else {
    222.             alert("添加失败，请重试");
    223.             return false;
    224.           }
    225.         },
    226.         complete(data) {
    227.           console.log(data);
    228.         },
    229.       });
    230.     }
    231.   });
    232. </script>
    233. </html>

  • 编辑（修改页面）

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>Document</title>
    8.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    9. </head>
    10. <body>
    11.   <style>
    12.     * {
    13.       background-color: #d4edda;
    14.       text-align: center;
    15.       font-size: 20px;
    16.     }
    17.     .form-control {
    18.       width: 500px;
    19.       padding: 0.375rem 0.75rem;
    20.       font-size: 1rem;
    21.       font-weight: 400;
    22.       line-height: 1.5;
    23.       color: #495057;
    24.       background-color: #fff;
    25.       background-clip: padding-box;
    26.       border: 1px solid #ced4da;
    27.       border-radius: 0.25rem;
    28.       transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    29.     }
    30.     button {
    31.       width: 600px;
    32.       color: #fff;
    33.       background-color: #28a745;
    34.       border-color: #28a745;
    35.     }
    36.     .select {
    37.       width: 265px;
    38.       height: 47px;
    39.     }
    40.   </style>
    41.   <h2 class="title">修改省</h2>
    42.   <form action="" onsubmit="return false;">
    43.     <p>
    44.       省名称:
    45.       <input type="text" class="form-control" id="area_name" />
    46.     </p>
    47.     <p>
    48.       首字母:
    49.       <input type="text" class="form-control" id="pinyin" />
    50.     </p>
    51.     <p>
    52.       拼音:
    53.       <input type="text" class="form-control" id="first_pinyin" />
    54.     </p>
    55.     <p>
    56.       精度:
    57.       <input type="text" class="form-control" id="lng" />
    58.     </p>
    59.     <p>
    60.       维度:
    61.       <input type="text" class="form-control" id="lat" />
    62.     </p>
    63.     <button>按钮</button>
    64.     <div id="msg" style="margin-top: 20px; color: Red; display: none"></div>
    65.   </form>
    66. </body>
    67. <script>
    68.   $("#area_name").keydown(function () {
    69.     $("#msg").hide();
    70.   });
    71.   $("#pinyin").keydown(function () {
    72.     $("#msg").hide();
    73.   });
    74.   $("#first_pinyin").keydown(function () {
    75.     $("#msg").hide();
    76.   });
    77.   $("#lng").keydown(function () {
    78.     $("#msg").hide();
    79.   });
    80.   $("#lat").keydown(function () {
    81.     $("#msg").hide();
    82.   });
    83.   $("button").click(function () {
    84.     let area_name = $("#area_name").val();
    85.     if (!area_name) {
    86.       msg("请输入省的名称");
    87.       return false;
    88.     }
    89.     let pinyin = $("#pinyin").val();
    90.     if (!pinyin) {
    91.       msg("请输入首字母");
    92.       return false;
    93.     }
    94.     let first_pinyin = $("#first_pinyin").val();
    95.     if (!first_pinyin) {
    96.       msg("请输入省份的拼音");
    97.       return false;
    98.     }
    99.     let lng = $("#lng").val();
    100.     if (!lng) {
    101.       msg("请输入精度");
    102.       return false;
    103.     }
    104.     let lat = $("#lat").val();
    105.     if (!lat) {
    106.       msg("请输入维度");
    107.       return false;
    108.     }
    110.     // 增加省接口：http://admin.ouyangke.cn/index.php/api/index/prov_add
    111.     //获取数据
    112.     // $.ajax({
    113.     //   url: "http://admin.ouyangke.cn/index.php/api/index/prov_one?area_id",
    115.     //   type: "POST",
    116.     //   async: true,
    117.     //   dataType: "json",
    119.     //   // success :function(){
    121.     //   // },
    122.     //   success(data) {
    123.     //     if (data.code == 0) {
    124.     //       alert("success");
    125.     //     } else {
    126.     //       alert("添加失败，请重试111111");
    127.     //       return false;
    128.     //     }
    129.     //   },
    130.     //   complete(data) {
    131.     //     console.log(data);
    132.     //   },phone.slice(-6)
    133.     // });
    134.     let area_id = window.location.search;
    135.     area_id = area_id.slice(-6);
    136.     alert(area_id);
    137.     //修改数据
    138.     $.ajax({
    139.       url: "http://admin.ouyangke.cn/index.php/api/index/prov_edit",
    140.       type: "POST",
    141.       data: {
    142.         area_id: area_id,
    143.         area_name: area_name, // 第一个area_name接口的参数(下标)
    144.         pinyin: pinyin,
    145.         first_pinyin: first_pinyin,
    146.         lng: lng,
    147.         lat: lat,
    148.       },
    149.       dataType: "json",
    150.       success(data) {
    151.         console.log(data);
    152.         if (data.code == 0) {
    153.           window.location.href = "6.html";
    154.         } else {
    155.           msg("修改失败，请重试");
    156.           return false;
    157.         }
    158.       },
    159.     });
    160.   });
    161.   function msg(text) {
    162.     $("#msg").text(text);
    163.     $("#msg").show();
    164.   }
    165. </script>
    166. </html>

    修改1修改2edit3

更多相关文章

  1. 匿名函数、箭头函数、立即执行函数和字面量
  2. 匿名函数、箭头函数和立即执行函数
  3. axios的跨域处理
  4. JS 函数的执行时机
  5. 16.【TP6学习笔记】其他通过CMD命令行的方式执行操作
  6. PHP:文件上传上传限制,文件大小不超过5M,文件后缀设置，检查图片合
  7. 详解支撑7亿用户搜索的百度图片处理收录中台
  8. 实现一个简易数字货币现货跟单机器人
  9. 自然语言处理集训营第一期

随机推荐

  1. Android 中文 API （16） ―― AnalogClock
  2. android系统开发(十)-audio移植一 .
  3. Android样式和主题(style&theme)
  4. Android对SD卡进行读写
  5. android中的基本控件
  6. Android之Handler用法总结
  7. [zz] 分析Android(安卓)根文件系统启动过
  8. Oprofile在Android中的应用
  9. Android shell 系统命令
  10. android常用框架