修改、删除省名称

大作业 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. <link
    9. href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"
    10. rel="stylesheet"
    11. />
    12. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    13. <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.js"></script>
    14. <style>
    15. * {
    16. text-align: center;
    17. font-size: 20px;
    18. }
    19. .title {
    20. text-align: center;
    21. }
    22. .width {
    23. width: 1200px;
    24. }
    25. tr {
    26. height: 50px;
    27. }
    28. table tr:nth-child(even) {
    29. background: lightblue;
    30. }
    31. </style>
    32. </head>
    33. <body>
    34. <h2 class="title">省份表</h2>
    35. <button class="btn btn-primary float-right" id="add">添加</button>
    36. <table
    37. class="width table table-striped table-bordered table-hover"
    38. id="tableId"
    39. border="1"
    40. align="center"
    41. cellspacing="0"
    42. >
    43. <thead>
    44. <tr>
    45. <th>编号</th>
    46. <th>名称</th>
    47. <th>首字母</th>
    48. <th>拼音</th>
    49. <th>精度</th>
    50. <th>维度</th>
    51. <th colspan="2">编辑</th>
    52. </tr>
    53. </thead>
    54. <tbody></tbody>
    55. </table>
    56. <div style="margin-top: 20px">
    57. <button class="btn btn-primary" id="up">上一页</button>
    58. <button class="btn btn-primary" id="lower">下一页</button>
    59. </div>
    60. <!-- <div style="margin-top: 20px">
    61. <button id="lower">更多</button>
    62. </div> -->
    63. <div
    64. class="float-right"
    65. style="margin: 20px 200px; text-align: right"
    66. ></div>
    67. </body>
    68. <script>
    69. // $.ajax() ajax的异步http 请求
    70. // $.get() 和 $.post() 方法都使用 $.ajax
    71. // function get(url,data,fun,type){
    72. // url 处理
    73. // data 处理
    74. // fun 处理
    75. // type 处理
    76. // $.ajax(url,data,fun,type)
    77. // }
    78. // 因为get 和post方法,可以快速去执行,方便我们写代码
    79. // $.ajax({
    80. // key : value,
    81. // key : value,
    82. // key : value,
    83. // key : value,
    84. // key : value,
    85. // key : value
    86. // })
    87. // key 就是参数
    88. // url 必需、请求的接口
    89. // data 给接口的数据、参数
    90. // type get、post
    91. // async 是否要异步处理,布尔值,true异步,false同步
    92. // dataType 服务器的数据类型
    93. // timeout 超时时间 ,毫秒。 2000,如果2秒,这个接口没有反应,这个请求就停止
    94. // success(data,status) 请求成功的方法
    95. // error(data,status) 请求失败的方法
    96. // complete(data,status) 不管成功还是失败,都会执行
    97. var js_page = 1;
    98. var count = 0;
    99. data(js_page);
    100. $("#lower").click(function () {
    101. if (js_page < count) {
    102. js_page = js_page + 1;
    103. console.log(js_page);
    104. data(js_page);
    105. }
    106. });
    107. $("#up").click(function () {
    108. if (js_page > 1) {
    109. js_page = js_page - 1;
    110. console.log(js_page);
    111. data(js_page);
    112. }
    113. });
    114. function data(js_page) {
    115. if (js_page == 1) {
    116. $("#up").attr("disabled", "disabled");
    117. } else {
    118. $("#up").removeAttr("disabled");
    119. }
    120. if (js_page == count) {
    121. $("#lower").attr("disabled", "disabled");
    122. } else {
    123. $("#lower").removeAttr("disabled");
    124. }
    125. $.ajax({
    126. url: "http://admin.ouyangke.cn/index.php/api/index/prov_list",
    127. data: {
    128. page: js_page,
    129. //limit: 10,
    130. //order: desc,
    131. },
    132. type: "GET",
    133. async: false,
    134. dataType: "json",
    135. timeout: 10000,
    136. // success :function(){
    137. // },
    138. success(data, status) {
    139. let html_data = "";
    140. for (let i = 0; i < data.data.length; i++) {
    141. html_data += "<tr>";
    142. html_data += "<th>" + data.data[i].area_id + "</th>";
    143. html_data += "<td>" + data.data[i].area_name + "</td>";
    144. html_data += "<td>" + data.data[i].pinyin + "</td>";
    145. html_data += "<td>" + data.data[i].first_pinyin + "</td>";
    146. html_data += "<td>" + data.data[i].lng + "</td>";
    147. html_data += "<td>" + data.data[i].lat + "</td>";
    148. html_data +=
    149. "<td><button class=btn btn-primary onclick='edit(" +
    150. data.data[i].area_id +
    151. ")'>修改</button> <button class=btn btn-primary onclick='del(" +
    152. data.data[i].area_id +
    153. ")'>删除</button></td>";
    154. html_data += "</tr>";
    155. }
    156. $("tbody").html(html_data);
    157. count = Math.ceil(data.count / 10);
    158. // let html_data1 = "";
    159. // for (let i = 1; i < count; i++) {
    160. // html_data1 +=
    161. // "<li class=page-item><a class=page-link>" + i + "</a></li>";
    162. // html_data1 +=
    163. // "<li class=page-item><a id=lower class=page-link>" +
    164. // "下一页" +
    165. // "</a></li>";
    166. // }
    167. // html_data1 +=
    168. // "<li class=page-item><a id=up class=page-link>" +
    169. // "上一页" +
    170. // "</a></li>";
    171. // console.log(html_data1);
    172. // $("#page-7").html(html_data1);
    173. console.log("天蓬");
    174. },
    175. });
    176. }
    177. // 异步处理:ajax这段代码,放那执行,其他代码不会受它的影响,会直接继续指向。
    178. // 你跟你爸妈 ,周天出去玩。。 到了周天,你说有事了。
    179. // 这个时候,有2个选择:
    180. // 1、你爸妈 它俩去。 异步处理
    181. // 2、你爸妈 等你处理完事(下周),在去。 同步处理
    182. // 如果是同步处理,打印欧阳克这段代码,必须等 上面的ajax执行完了, 才会执行。
    183. // 现在是没有等ajax执行完,它就执行了,这是 异步处理。
    184. console.log("欧阳克");
    185. // 改为同步处理,async:false, 就是天蓬先打印出来,欧阳克要等ajax执行完,才会被打印出来
    186. // $.ajax 是jquery底层ajax,底层封装一个方法
    187. // get、 post 是对ajax 进一步封装
    188. $("#add").click(function () {
    189. window.location.href = "7.html";
    190. });
    191. //删除按钮
    192. function del(del_id) {
    193. // 在页面任意位置点击而触发此事件
    194. if (del_id > 820307) {
    195. $.ajax({
    196. url: "http://admin.ouyangke.cn/index.php/api/index/prov_del",
    197. data: {
    198. area_id: del_id,
    199. },
    200. type: "POST",
    201. async: false,
    202. dataType: "json",
    203. timeout: 10000,
    204. // success :function(){
    205. // },
    206. success(data) {
    207. if (data.code == 0) {
    208. alert("success");
    209. window.location.href = "6.html";
    210. } else {
    211. alert("添加失败,请重试");
    212. return false;
    213. }
    214. },
    215. // complete(data) {
    216. // console.log(data);
    217. // },
    218. });
    219. }
    220. }
    221. //修改跳转页面
    222. function edit(id) {
    223. if (id > 820307)
    224. // 在页面任意位置点击而触发此事件
    225. window.location.href = "demo1.html?area_id=" + id;
    226. }
    227. </script>
    228. </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. <link
    9. href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"
    10. rel="stylesheet"
    11. />
    12. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    13. <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.js"></script>
    14. <style>
    15. * {
    16. background-color: #d4edda;
    17. text-align: center;
    18. font-size: 20px;
    19. }
    20. .form-control {
    21. width: 500px;
    22. padding: 0.375rem 0.75rem;
    23. font-size: 1rem;
    24. font-weight: 400;
    25. line-height: 1.5;
    26. color: #495057;
    27. background-color: #fff;
    28. background-clip: padding-box;
    29. border: 1px solid #ced4da;
    30. border-radius: 0.25rem;
    31. transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    32. }
    33. .col-md-2 {
    34. padding-left: 0;
    35. padding-right: 0;
    36. }
    37. button {
    38. width: 242px;
    39. }
    40. </style>
    41. </head>
    42. <body>
    43. <h2 class="title">添加省</h2>
    44. <div class="d-flex h-100">
    45. <div class="m-auto">
    46. <form action="" style="align-content: center" onsubmit="return false;">
    47. <div class="form-group">
    48. <label class="col-md-2 control-label">省名称</label>
    49. <div class="col-md-6">
    50. <input type="text" class="form-control" id="area_name" />
    51. </div>
    52. </div>
    53. <div class="form-group">
    54. <label class="col-md-2 control-label">首字母</label>
    55. <div class="col-md-6">
    56. <input type="text" class="form-control" id="first_pinyin" />
    57. </div>
    58. </div>
    59. <div class="form-group">
    60. <label class="col-md-2 control-label">拼音</label>
    61. <div class="col-md-6">
    62. <input type="text" class="form-control" id="pinyin" />
    63. </div>
    64. </div>
    65. <div class="form-group">
    66. <label class="col-md-2 control-label">精度</label>
    67. <div class="col-md-6">
    68. <input type="text" class="form-control" id="lng" />
    69. </div>
    70. </div>
    71. <div class="form-group">
    72. <label class="col-md-2 control-label">维度</label>
    73. <div class="col-md-6">
    74. <input type="text" class="form-control" id="lat" />
    75. </div>
    76. </div>
    77. <div class="form-group">
    78. <label class="col-md-2 control-label"></label>
    79. <div class="col-md-12">
    80. <button class="btn btn-primary btn btn-default btn-lg">
    81. 提交
    82. </button>
    83. </div>
    84. </div>
    85. </form>
    86. </div>
    87. </div>
    88. <div id="msg" style="margin-top: 20px; color: Red; display: none"></div>
    89. </body>
    90. <script>
    91. $("#area_name").keydown(function () {
    92. $("#msg").hide();
    93. });
    94. $("#pinyin").keydown(function () {
    95. $("#msg").hide();
    96. });
    97. $("#first_pinyin").keydown(function () {
    98. $("#msg").hide();
    99. });
    100. $("#lng").keydown(function () {
    101. $("#msg").hide();
    102. });
    103. $("#lat").keydown(function () {
    104. $("#msg").hide();
    105. });
    106. id = window.location.search.slice(-6);
    107. $.ajax({
    108. url: "http://admin.ouyangke.cn/index.php/api/index/prov_one",
    109. type: "POST",
    110. data: {
    111. area_id: id,
    112. },
    113. dataType: "json",
    114. success(data) {
    115. console.log(data);
    116. $("#area_name").val(data.data.area_name);
    117. $("#pinyin").val(data.data.pinyin);
    118. $("#first_pinyin").val(data.data.first_pinyin);
    119. $("#lng").val(data.data.lng);
    120. $("#lat").val(data.data.lat);
    121. if (data.code == 0) {
    122. //window.location.href = "6.html";
    123. } else {
    124. msg("添加失败,请重试");
    125. return false;
    126. }
    127. },
    128. });
    129. $("button").click(function () {
    130. let area_name = $("#area_name").val();
    131. if (!area_name) {
    132. msg("请输入省的名称");
    133. return false;
    134. }
    135. let pinyin = $("#pinyin").val();
    136. if (!pinyin) {
    137. msg("请输入省份的拼音");
    138. return false;
    139. }
    140. let first_pinyin = $("#first_pinyin").val();
    141. if (!first_pinyin) {
    142. msg("请输入首字母");
    143. return false;
    144. }
    145. let lng = $("#lng").val();
    146. if (!lng) {
    147. msg("请输入精度");
    148. return false;
    149. }
    150. let lat = $("#lat").val();
    151. if (!lat) {
    152. msg("请输入维度");
    153. return false;
    154. }
    155. // 增加省接口:http://admin.ouyangke.cn/index.php/api/index/prov_add
    156. $.ajax({
    157. url: "http://admin.ouyangke.cn/index.php/api/index/prov_edit",
    158. type: "POST",
    159. data: {
    160. area_id: id,
    161. area_name: area_name, // 第一个area_name接口的参数(下标)
    162. pinyin: pinyin,
    163. first_pinyin: first_pinyin,
    164. lng: lng,
    165. lat: lat,
    166. },
    167. dataType: "json",
    168. success(data) {
    169. console.log(data);
    170. if (data.code == 0) {
    171. window.location.href = "6.html";
    172. } else {
    173. msg("修改失败,请重试");
    174. return false;
    175. }
    176. },
    177. });
    178. });
    179. function msg(text) {
    180. $("#msg").text(text);
    181. $("#msg").show();
    182. }
    183. </script>
    184. </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. <link
    9. href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"
    10. rel="stylesheet"
    11. />
    12. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    13. <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.js"></script>
    14. <style>
    15. * {
    16. text-align: center;
    17. font-size: 20px;
    18. }
    19. .title {
    20. text-align: center;
    21. }
    22. .width {
    23. width: 1200px;
    24. }
    25. tr {
    26. height: 50px;
    27. }
    28. table tr:nth-child(even) {
    29. background: lightblue;
    30. }
    31. </style>
    32. </head>
    33. <body>
    34. <h2 class="title">省份表</h2>
    35. <button class="btn btn-primary float-right" id="add">添加</button>
    36. <table
    37. class="width table table-striped table-bordered table-hover"
    38. id="tableId"
    39. border="1"
    40. align="center"
    41. cellspacing="0"
    42. >
    43. <thead>
    44. <tr>
    45. <th>编号</th>
    46. <th>名称</th>
    47. <th>首字母</th>
    48. <th>拼音</th>
    49. <th>精度</th>
    50. <th>维度</th>
    51. <th colspan="2">编辑</th>
    52. </tr>
    53. </thead>
    54. <tbody></tbody>
    55. </table>
    56. <div style="margin-top: 20px">
    57. <button class="btn btn-primary" id="up">上一页</button>
    58. <button class="btn btn-primary" id="lower">下一页</button>
    59. </div>
    60. <!-- <div style="margin-top: 20px">
    61. <button id="lower">更多</button>
    62. </div> -->
    63. <div
    64. class="float-right"
    65. style="margin: 20px 200px; text-align: right"
    66. ></div>
    67. </body>
    68. <script>
    69. // $.ajax() ajax的异步http 请求
    70. // $.get() 和 $.post() 方法都使用 $.ajax
    71. // function get(url,data,fun,type){
    72. // url 处理
    73. // data 处理
    74. // fun 处理
    75. // type 处理
    76. // $.ajax(url,data,fun,type)
    77. // }
    78. // 因为get 和post方法,可以快速去执行,方便我们写代码
    79. // $.ajax({
    80. // key : value,
    81. // key : value,
    82. // key : value,
    83. // key : value,
    84. // key : value,
    85. // key : value
    86. // })
    87. // key 就是参数
    88. // url 必需、请求的接口
    89. // data 给接口的数据、参数
    90. // type get、post
    91. // async 是否要异步处理,布尔值,true异步,false同步
    92. // dataType 服务器的数据类型
    93. // timeout 超时时间 ,毫秒。 2000,如果2秒,这个接口没有反应,这个请求就停止
    94. // success(data,status) 请求成功的方法
    95. // error(data,status) 请求失败的方法
    96. // complete(data,status) 不管成功还是失败,都会执行
    97. var js_page = 1;
    98. var count = 0;
    99. data(js_page);
    100. $("#lower").click(function () {
    101. if (js_page < count) {
    102. js_page = js_page + 1;
    103. console.log(js_page);
    104. data(js_page);
    105. }
    106. });
    107. $("#up").click(function () {
    108. if (js_page > 1) {
    109. js_page = js_page - 1;
    110. console.log(js_page);
    111. data(js_page);
    112. }
    113. });
    114. function data(js_page) {
    115. if (js_page == 1) {
    116. $("#up").attr("disabled", "disabled");
    117. } else {
    118. $("#up").removeAttr("disabled");
    119. }
    120. if (js_page == count) {
    121. $("#lower").attr("disabled", "disabled");
    122. } else {
    123. $("#lower").removeAttr("disabled");
    124. }
    125. $.ajax({
    126. url: "http://admin.ouyangke.cn/index.php/api/index/prov_list",
    127. data: {
    128. page: js_page,
    129. //limit: 10,
    130. //order: desc,
    131. },
    132. type: "GET",
    133. async: false,
    134. dataType: "json",
    135. timeout: 10000,
    136. // success :function(){
    137. // },
    138. success(data, status) {
    139. let html_data = "";
    140. for (let i = 0; i < data.data.length; i++) {
    141. html_data += "<tr>";
    142. html_data += "<th>" + data.data[i].area_id + "</th>";
    143. html_data += "<td>" + data.data[i].area_name + "</td>";
    144. html_data += "<td>" + data.data[i].pinyin + "</td>";
    145. html_data += "<td>" + data.data[i].first_pinyin + "</td>";
    146. html_data += "<td>" + data.data[i].lng + "</td>";
    147. html_data += "<td>" + data.data[i].lat + "</td>";
    148. html_data +=
    149. "<td><button class=btn btn-primary onclick='edit(" +
    150. data.data[i].area_id +
    151. ")'>修改</button> <button class=btn btn-primary onclick='del(" +
    152. data.data[i].area_id +
    153. ")'>删除</button></td>";
    154. html_data += "</tr>";
    155. }
    156. $("tbody").html(html_data);
    157. count = Math.ceil(data.count / 10);
    158. // let html_data1 = "";
    159. // for (let i = 1; i < count; i++) {
    160. // html_data1 +=
    161. // "<li class=page-item><a class=page-link>" + i + "</a></li>";
    162. // html_data1 +=
    163. // "<li class=page-item><a id=lower class=page-link>" +
    164. // "下一页" +
    165. // "</a></li>";
    166. // }
    167. // html_data1 +=
    168. // "<li class=page-item><a id=up class=page-link>" +
    169. // "上一页" +
    170. // "</a></li>";
    171. // console.log(html_data1);
    172. // $("#page-7").html(html_data1);
    173. console.log("天蓬");
    174. },
    175. });
    176. }
    177. // 异步处理:ajax这段代码,放那执行,其他代码不会受它的影响,会直接继续指向。
    178. // 你跟你爸妈 ,周天出去玩。。 到了周天,你说有事了。
    179. // 这个时候,有2个选择:
    180. // 1、你爸妈 它俩去。 异步处理
    181. // 2、你爸妈 等你处理完事(下周),在去。 同步处理
    182. // 如果是同步处理,打印欧阳克这段代码,必须等 上面的ajax执行完了, 才会执行。
    183. // 现在是没有等ajax执行完,它就执行了,这是 异步处理。
    184. console.log("欧阳克");
    185. // 改为同步处理,async:false, 就是天蓬先打印出来,欧阳克要等ajax执行完,才会被打印出来
    186. // $.ajax 是jquery底层ajax,底层封装一个方法
    187. // get、 post 是对ajax 进一步封装
    188. $("#add").click(function () {
    189. window.location.href = "7.html";
    190. });
    191. //删除按钮
    192. function del(del_id) {
    193. // 在页面任意位置点击而触发此事件
    194. if (del_id > 820307) {
    195. $.ajax({
    196. url: "http://admin.ouyangke.cn/index.php/api/index/prov_del",
    197. data: {
    198. area_id: del_id,
    199. },
    200. type: "POST",
    201. async: false,
    202. dataType: "json",
    203. timeout: 10000,
    204. // success :function(){
    205. // },
    206. success(data) {
    207. if (data.code == 0) {
    208. alert("success");
    209. window.location.href = "6.html";
    210. } else {
    211. alert("添加失败,请重试");
    212. return false;
    213. }
    214. },
    215. // complete(data) {
    216. // console.log(data);
    217. // },
    218. });
    219. }
    220. }
    221. //button[(name = "area_name")];
    222. function edit(id) {
    223. if (id > 820307)
    224. // 在页面任意位置点击而触发此事件
    225. window.location.href = "demo1.html?area_id=" + id;
    226. }
    227. </script>
    228. </html>

    del

更多相关文章

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

随机推荐

  1. Android手机上关于viewport的理解
  2. Android 漫游之路------Android电话拨号
  3. Android中minSdkVersion、targetSdkVersi
  4. Android窗体悬浮在另一个窗体
  5. android 设置app版本号
  6. Android 聊天软件实现
  7. Android动画效果生动有趣的通知NiftyNoti
  8. Android应用程序开发(第三版)-课后习题解答
  9. android屏幕监视工具 android screen mon
  10. Android(安卓)TextView长按复制文本