修改、删除省名称

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

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0628第1节课

2021-06-28 22:48:00