修改、删除省名称

大作业 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

修改省（跳转页面）

<!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>Document</title>
  <link
    href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"
    rel="stylesheet"
  />
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.js"></script>
  <style>
    * {
      text-align: center;
      font-size: 20px;
    }
    .title {
      text-align: center;
    }
    .width {
      width: 1200px;
    }
    tr {
      height: 50px;
    }
    table tr:nth-child(even) {
      background: lightblue;
    }
  </style>
</head>
<body>
  <h2 class="title">省份表</h2>
  <button class="btn btn-primary float-right" id="add">添加</button>
  <table
    class="width table table-striped table-bordered table-hover"
    id="tableId"
    border="1"
    align="center"
    cellspacing="0"
  >
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>首字母</th>
        <th>拼音</th>
        <th>精度</th>
        <th>维度</th>
        <th colspan="2">编辑</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div style="margin-top: 20px">
    <button class="btn btn-primary" id="up">上一页</button>
    <button class="btn btn-primary" id="lower">下一页</button>
  </div>
  <!-- <div style="margin-top: 20px">
    <button id="lower">更多</button>
  </div> -->
  <div
    class="float-right"
    style="margin: 20px 200px; text-align: right"
  ></div>
</body>
<script>
  //   $.ajax()   ajax的异步http 请求
  // $.get() 和 $.post() 方法都使用 $.ajax
  // function get(url,data,fun,type){
  // url 处理
  // data 处理
  // fun 处理
  // type 处理
  // $.ajax(url,data,fun,type)
  // }
  // 因为get 和post方法，可以快速去执行，方便我们写代码
  // $.ajax({
  //     key : value,
  //     key : value,
  //     key : value,
  //     key : value,
  //     key : value,
  //     key : value
  // })
  // key 就是参数
  // url     必需、请求的接口
  // data        给接口的数据、参数
  // type        get、post
  // async    是否要异步处理，布尔值，true异步，false同步
  // dataType       服务器的数据类型
  // timeout         超时时间 ，毫秒。 2000，如果2秒，这个接口没有反应，这个请求就停止
  // success(data,status)  请求成功的方法
  // error(data,status)    请求失败的方法
  // complete(data,status)   不管成功还是失败，都会执行
  var js_page = 1;
  var count = 0;
  data(js_page);
  $("#lower").click(function () {
    if (js_page < count) {
      js_page = js_page + 1;
      console.log(js_page);
      data(js_page);
    }
  });
  $("#up").click(function () {
    if (js_page > 1) {
      js_page = js_page - 1;
      console.log(js_page);
      data(js_page);
    }
  });
  function data(js_page) {
    if (js_page == 1) {
      $("#up").attr("disabled", "disabled");
    } else {
      $("#up").removeAttr("disabled");
    }
    if (js_page == count) {
      $("#lower").attr("disabled", "disabled");
    } else {
      $("#lower").removeAttr("disabled");
    }
    $.ajax({
      url: "http://admin.ouyangke.cn/index.php/api/index/prov_list",
      data: {
        page: js_page,
        //limit: 10,
        //order: desc,
      },
      type: "GET",
      async: false,
      dataType: "json",
      timeout: 10000,
      // success :function(){
      // },
      success(data, status) {
        let html_data = "";
        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 +=
            "<td><button class=btn btn-primary onclick='edit(" +
            data.data[i].area_id +
            ")'>修改</button> <button  class=btn btn-primary onclick='del(" +
            data.data[i].area_id +
            ")'>删除</button></td>";
          html_data += "</tr>";
        }
        $("tbody").html(html_data);
        count = Math.ceil(data.count / 10);
        // let html_data1 = "";
        // for (let i = 1; i < count; i++) {
        //   html_data1 +=
        //     "<li class=page-item><a class=page-link>" + i + "</a></li>";
        //   html_data1 +=
        //     "<li class=page-item><a id=lower class=page-link>" +
        //     "下一页" +
        //     "</a></li>";
        // }
        // html_data1 +=
        //     "<li class=page-item><a id=up class=page-link>" +
        //     "上一页" +
        //     "</a></li>";
        // console.log(html_data1);
        // $("#page-7").html(html_data1);
        console.log("天蓬");
      },
    });
  }
  // 异步处理：ajax这段代码，放那执行，其他代码不会受它的影响，会直接继续指向。
  // 你跟你爸妈 ，周天出去玩。。 到了周天，你说有事了。
  // 这个时候，有2个选择：
  //     1、你爸妈 它俩去。 异步处理
  //     2、你爸妈 等你处理完事（下周），在去。  同步处理
  // 如果是同步处理，打印欧阳克这段代码，必须等 上面的ajax执行完了， 才会执行。
  // 现在是没有等ajax执行完，它就执行了，这是 异步处理。
  console.log("欧阳克");
  // 改为同步处理，async:false， 就是天蓬先打印出来，欧阳克要等ajax执行完，才会被打印出来
  // $.ajax 是jquery底层ajax，底层封装一个方法
  // get、 post 是对ajax 进一步封装
  $("#add").click(function () {
    window.location.href = "7.html";
  });
  //删除按钮
  function del(del_id) {
    // 在页面任意位置点击而触发此事件
    if (del_id > 820307) {
      $.ajax({
        url: "http://admin.ouyangke.cn/index.php/api/index/prov_del",
        data: {
          area_id: del_id,
        },
        type: "POST",
        async: false,
        dataType: "json",
        timeout: 10000,
        // success :function(){
        // },
        success(data) {
          if (data.code == 0) {
            alert("success");
            window.location.href = "6.html";
          } else {
            alert("添加失败，请重试");
            return false;
          }
        },
        //   complete(data) {
        //     console.log(data);
        //   },
      });
    }
  }
  //修改跳转页面
  function edit(id) {
    if (id > 820307)
      // 在页面任意位置点击而触发此事件
      window.location.href = "demo1.html?area_id=" + id;
  }
</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>Document</title>
  <link
    href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"
    rel="stylesheet"
  />
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.js"></script>
  <style>
    * {
      background-color: #d4edda;
      text-align: center;
      font-size: 20px;
    }
    .form-control {
      width: 500px;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .col-md-2 {
      padding-left: 0;
      padding-right: 0;
    }
    button {
      width: 242px;
    }
  </style>
</head>
<body>
  <h2 class="title">添加省</h2>
  <div class="d-flex h-100">
    <div class="m-auto">
      <form action="" style="align-content: center" onsubmit="return false;">
        <div class="form-group">
          <label class="col-md-2 control-label">省名称</label>
          <div class="col-md-6">
            <input type="text" class="form-control" id="area_name" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label">首字母</label>
          <div class="col-md-6">
            <input type="text" class="form-control" id="first_pinyin" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label">拼音</label>
          <div class="col-md-6">
            <input type="text" class="form-control" id="pinyin" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label">精度</label>
          <div class="col-md-6">
            <input type="text" class="form-control" id="lng" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label">维度</label>
          <div class="col-md-6">
            <input type="text" class="form-control" id="lat" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label"></label>
          <div class="col-md-12">
            <button class="btn btn-primary btn btn-default btn-lg">
              提交
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="msg" style="margin-top: 20px; color: Red; display: none"></div>
</body>
<script>
  $("#area_name").keydown(function () {
    $("#msg").hide();
  });
  $("#pinyin").keydown(function () {
    $("#msg").hide();
  });
  $("#first_pinyin").keydown(function () {
    $("#msg").hide();
  });
  $("#lng").keydown(function () {
    $("#msg").hide();
  });
  $("#lat").keydown(function () {
    $("#msg").hide();
  });
  id = window.location.search.slice(-6);
  $.ajax({
    url: "http://admin.ouyangke.cn/index.php/api/index/prov_one",
    type: "POST",
    data: {
      area_id: id,
    },
    dataType: "json",
    success(data) {
      console.log(data);
      $("#area_name").val(data.data.area_name);
      $("#pinyin").val(data.data.pinyin);
      $("#first_pinyin").val(data.data.first_pinyin);
      $("#lng").val(data.data.lng);
      $("#lat").val(data.data.lat);
      if (data.code == 0) {
        //window.location.href = "6.html";
      } else {
        msg("添加失败，请重试");
        return false;
      }
    },
  });
  $("button").click(function () {
    let area_name = $("#area_name").val();
    if (!area_name) {
      msg("请输入省的名称");
      return false;
    }
    let pinyin = $("#pinyin").val();
    if (!pinyin) {
      msg("请输入省份的拼音");
      return false;
    }
    let first_pinyin = $("#first_pinyin").val();
    if (!first_pinyin) {
      msg("请输入首字母");
      return false;
    }
    let lng = $("#lng").val();
    if (!lng) {
      msg("请输入精度");
      return false;
    }
    let lat = $("#lat").val();
    if (!lat) {
      msg("请输入维度");
      return false;
    }
    // 增加省接口：http://admin.ouyangke.cn/index.php/api/index/prov_add
    $.ajax({
      url: "http://admin.ouyangke.cn/index.php/api/index/prov_edit",
      type: "POST",
      data: {
        area_id: id,
        area_name: area_name, // 第一个area_name接口的参数(下标)
        pinyin: pinyin,
        first_pinyin: first_pinyin,
        lng: lng,
        lat: lat,
      },
      dataType: "json",
      success(data) {
        console.log(data);
        if (data.code == 0) {
          window.location.href = "6.html";
        } else {
          msg("修改失败，请重试");
          return false;
        }
      },
    });
  });
  function msg(text) {
    $("#msg").text(text);
    $("#msg").show();
  }
</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>Document</title>
  <link
    href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css"
    rel="stylesheet"
  />
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.js"></script>
  <style>
    * {
      text-align: center;
      font-size: 20px;
    }
    .title {
      text-align: center;
    }
    .width {
      width: 1200px;
    }
    tr {
      height: 50px;
    }
    table tr:nth-child(even) {
      background: lightblue;
    }
  </style>
</head>
<body>
  <h2 class="title">省份表</h2>
  <button class="btn btn-primary float-right" id="add">添加</button>
  <table
    class="width table table-striped table-bordered table-hover"
    id="tableId"
    border="1"
    align="center"
    cellspacing="0"
  >
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>首字母</th>
        <th>拼音</th>
        <th>精度</th>
        <th>维度</th>
        <th colspan="2">编辑</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div style="margin-top: 20px">
    <button class="btn btn-primary" id="up">上一页</button>
    <button class="btn btn-primary" id="lower">下一页</button>
  </div>
  <!-- <div style="margin-top: 20px">
    <button id="lower">更多</button>
  </div> -->
  <div
    class="float-right"
    style="margin: 20px 200px; text-align: right"
  ></div>
</body>
<script>
  //   $.ajax()   ajax的异步http 请求
  // $.get() 和 $.post() 方法都使用 $.ajax
  // function get(url,data,fun,type){
  // url 处理
  // data 处理
  // fun 处理
  // type 处理
  // $.ajax(url,data,fun,type)
  // }
  // 因为get 和post方法，可以快速去执行，方便我们写代码
  // $.ajax({
  //     key : value,
  //     key : value,
  //     key : value,
  //     key : value,
  //     key : value,
  //     key : value
  // })
  // key 就是参数
  // url     必需、请求的接口
  // data        给接口的数据、参数
  // type        get、post
  // async    是否要异步处理，布尔值，true异步，false同步
  // dataType       服务器的数据类型
  // timeout         超时时间 ，毫秒。 2000，如果2秒，这个接口没有反应，这个请求就停止
  // success(data,status)  请求成功的方法
  // error(data,status)    请求失败的方法
  // complete(data,status)   不管成功还是失败，都会执行
  var js_page = 1;
  var count = 0;
  data(js_page);
  $("#lower").click(function () {
    if (js_page < count) {
      js_page = js_page + 1;
      console.log(js_page);
      data(js_page);
    }
  });
  $("#up").click(function () {
    if (js_page > 1) {
      js_page = js_page - 1;
      console.log(js_page);
      data(js_page);
    }
  });
  function data(js_page) {
    if (js_page == 1) {
      $("#up").attr("disabled", "disabled");
    } else {
      $("#up").removeAttr("disabled");
    }
    if (js_page == count) {
      $("#lower").attr("disabled", "disabled");
    } else {
      $("#lower").removeAttr("disabled");
    }
    $.ajax({
      url: "http://admin.ouyangke.cn/index.php/api/index/prov_list",
      data: {
        page: js_page,
        //limit: 10,
        //order: desc,
      },
      type: "GET",
      async: false,
      dataType: "json",
      timeout: 10000,
      // success :function(){
      // },
      success(data, status) {
        let html_data = "";
        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 +=
            "<td><button class=btn btn-primary onclick='edit(" +
            data.data[i].area_id +
            ")'>修改</button> <button  class=btn btn-primary onclick='del(" +
            data.data[i].area_id +
            ")'>删除</button></td>";
          html_data += "</tr>";
        }
        $("tbody").html(html_data);
        count = Math.ceil(data.count / 10);
        // let html_data1 = "";
        // for (let i = 1; i < count; i++) {
        //   html_data1 +=
        //     "<li class=page-item><a class=page-link>" + i + "</a></li>";
        //   html_data1 +=
        //     "<li class=page-item><a id=lower class=page-link>" +
        //     "下一页" +
        //     "</a></li>";
        // }
        // html_data1 +=
        //     "<li class=page-item><a id=up class=page-link>" +
        //     "上一页" +
        //     "</a></li>";
        // console.log(html_data1);
        // $("#page-7").html(html_data1);
        console.log("天蓬");
      },
    });
  }
  // 异步处理：ajax这段代码，放那执行，其他代码不会受它的影响，会直接继续指向。
  // 你跟你爸妈 ，周天出去玩。。 到了周天，你说有事了。
  // 这个时候，有2个选择：
  //     1、你爸妈 它俩去。 异步处理
  //     2、你爸妈 等你处理完事（下周），在去。  同步处理
  // 如果是同步处理，打印欧阳克这段代码，必须等 上面的ajax执行完了， 才会执行。
  // 现在是没有等ajax执行完，它就执行了，这是 异步处理。
  console.log("欧阳克");
  // 改为同步处理，async:false， 就是天蓬先打印出来，欧阳克要等ajax执行完，才会被打印出来
  // $.ajax 是jquery底层ajax，底层封装一个方法
  // get、 post 是对ajax 进一步封装
  $("#add").click(function () {
    window.location.href = "7.html";
  });
  //删除按钮
  function del(del_id) {
    // 在页面任意位置点击而触发此事件
    if (del_id > 820307) {
      $.ajax({
        url: "http://admin.ouyangke.cn/index.php/api/index/prov_del",
        data: {
          area_id: del_id,
        },
        type: "POST",
        async: false,
        dataType: "json",
        timeout: 10000,
        // success :function(){
        // },
        success(data) {
          if (data.code == 0) {
            alert("success");
            window.location.href = "6.html";
          } else {
            alert("添加失败，请重试");
            return false;
          }
        },
        //   complete(data) {
        //     console.log(data);
        //   },
      });
    }
  }
  //button[(name = "area_name")];
  function edit(id) {
    if (id > 820307)
      // 在页面任意位置点击而触发此事件
      window.location.href = "demo1.html?area_id=" + id;
  }
</script>
</html>

del

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0628第1节课

2021-06-28 22:48:00