search

博客列表 >Ajax 添加删除修改

Ajax 添加删除修改

小庄
小庄原创
2021年07月25日 23:24:23841浏览

Ajax 添加删除修改

  1. /* 首页 + 删除 */
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.     <title>Document</title>
  10.     <style>
  11.         * {
  12.           text-align: center;
  13.           font-size: 20px;
  14.         }
  15.         .title {
  16.           text-align: center;
  17.         }
  18.         .width {
  19.           width: 1200px;
  20.         }
  21.         tr {
  22.           height: 50px;
  23.         }
  24.       </style>
  25. </head>
  26. <body>
  27.     <h2 class="title">省份表</h2>
  28.     <div style="margin: 20px 200px; text-align: right">
  29.       <button id="add">添加</button>
  30.     </div>
  31.     <table class="width" id="tableId" border="1" align="center" cellspacing="0">
  32.       <thead>
  33.         <tr>
  34.           <th>编号</th>
  35.           <th>名称</th>
  36.           <th>首字母</th>
  37.           <th>拼音</th>
  38.           <th>精度</th>
  39.           <th>纬度</th>
  40.           <th>修改</th>
  41.           <th>删除</th>
  42.         </tr>
  43.       </thead>
  44.       <tbody></tbody>
  45.     </table>
  46.     <div style="margin-top: 20px">
  47.       <button id="lower">更多</button>
  48.     </div>
  49.     <script>
  50.         window.onload = function(){
  51.             onloads()
  52.         }
  54.         function onloads(){
  55.         $.get("http://admin.ouyangke.cn/index.php/api/index/prov_list",
  56.         {
  57.             // page:7,
  58.             limit:220
  59.         },function(data){
  60.             let html_data = "";
  61.             // console.log(data);
  62.             // console.log(data.data.length);
  63.             for(let i = 0;i < data.data.length; i++){
  64.                 html_data += "<tr>"
  65.                 html_data += "<td>" + data.data[i].area_id + "</td>";
  66.                 html_data += "<td>" + data.data[i].area_name + "</td>";
  67.                 html_data += "<td>" + data.data[i].pinyin + "</td>";
  68.                 html_data += "<td>" + data.data[i].first_pinyin + "</td>";
  69.                 html_data += "<td>" + data.data[i].lat + "</td>";
  70.                 html_data += "<td>" + data.data[i].lng + "</td>";
  71.                 html_data += "<td><a href='updata.html?id=" + data.data[i].area_id + "'>修改</a></td>";
  72.                 html_data += "<td><button onclick='del("+ data.data[i].area_id +")'>删除</button></td>";
  73.                 html_data += "</tr>"
  74.             }
  75.             $('tbody').append(html_data);
  76.         },'JSON');
  78.         $('#add').click(function(){
  79.             window.location.href = "add.html"
  80.         });
  81.         }
  83.         /* 删除 start */
  84.         function del(id){
  85.             if(confirm('确定删除？','取消')){
  86.             $.ajax({
  87.                 url:"http://admin.ouyangke.cn/index.php/api/index/prov_del",
  88.                 type:"post",
  89.                 data:{
  90.                 area_id:id,
  91.                 },
  92.                 dataType:"json",
  93.                 success(data,status){
  94.                     window.location.href = "index.html"
  95.                 },
  96.                 error(e){
  97.                 console.log("出错啦！！：" + e);
  98.                 }
  99.             });
  100.             }
  101.         }
  102.          /* 删除 end */
  103.     </script>
  105. </body>
  106. </html>
  1. /* 添加 */
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Add</title>
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  10.   </head>
  11.   <body>
  12.     <style>
  13.       * {
  14.         background-color: #d4edda;
  15.         text-align: center;
  16.         font-size: 20px;
  17.       }
  18.       .form-control {
  19.         width: 500px;
  20.         padding: 0.375rem 0.75rem;
  21.         font-size: 1rem;
  22.         font-weight: 400;
  23.         line-height: 1.5;
  24.         color: #495057;
  25.         background-color: #fff;
  26.         background-clip: padding-box;
  27.         border: 1px solid #ced4da;
  28.         border-radius: 0.25rem;
  29.         transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  30.       }
  31.       button {
  32.         width: 600px;
  33.         color: #fff;
  34.         background-color: #28a745;
  35.         border-color: #28a745;
  36.       }
  37.       .select {
  38.         width: 265px;
  39.         height: 47px;
  40.       }
  41.     </style>
  42.     <h2 class="title">添加省</h2>
  43.     <form action="" onsubmit="return false;">
  44.       <p>
  45.         省名称:
  46.         <input type="text" class="form-control" id="area_name" /><span></span>
  47.       </p>
  48.       <p>
  49.         首字母:
  50.         <input type="text" class="form-control" id="pinyin" /><span></span>
  51.       </p>
  52.       <p>
  53.         拼音:
  54.         <input type="text" class="form-control" id="first_pinyin" /><span></span>
  55.       </p>
  56.       <p>
  57.         精度:
  58.         <input type="text" class="form-control" id="lng" /><span></span>
  59.       </p>
  60.       <p>
  61.         维度:
  62.         <input type="text" class="form-control" id="lat" /><span></span>
  63.       </p>
  64.       <button>按钮</button>
  65.       <div id="msg" style="margin-top: 20px; color: Red; display: none"></div>
  66.     </form>
  67.   </body>
  68.   <script>
  69.   /* 非空判断 start */
  70.     let area_name = null;
  71.     let pinyin  = null;
  72.     let first_pinyin  = null;
  73.     let lng  = null;
  74.     let lat  = null;
  75.     $('#area_name').blur(function(){
  76.       if($(this).val() != "") {
  77.         $('#area_name').next().text("");
  78.         area_name = $('#area_name').val();
  79.         // console.log(area_name)
  80.       }else{
  81.         $('#area_name').next().text("省份名称不能为空！").css('color','red');
  82.         $('#area_name').focus();
  83.       }
  84.     });
  85.     $('#pinyin').blur(function(){
  86.       if($(this).val() != "") {
  87.         $('#pinyin').next().text("");
  88.         pinyin = $('#pinyin').val();
  89.       }else{
  90.         $('#pinyin').next().text("首字母不能为空！").css('color','red');
  91.         $('#pinyin').focus();
  92.       }
  93.     });
  94.     $('#first_pinyin').blur(function(){
  95.       if($(this).val() != "") {
  96.         $('#first_pinyin').next().text("");
  97.         first_pinyin = $('#first_pinyin').val();
  98.       }else{
  99.         $('#first_pinyin').next().text("拼音不能为空！").css('color','red');
  100.         $('#first_pinyin').focus();
  101.       }
  102.     });
  103.     $('#lng').blur(function(){
  104.       if($(this).val() != "") {
  105.         $('#lng').next().text("");
  106.         lng = $('#lng').val();
  107.       }else{
  108.         $('#lng').next().text("精度不能为空！").css('color','red');
  109.         $('#lng').focus();
  110.       }
  111.     });
  112.     $('#lat').blur(function(){
  113.       if($(this).val() != "") {
  114.         $('#lat').next().text("");
  115.         lat = $('#lat').val();
  116.       }else{
  117.         $('#lat').next().text("纬度不能为空！").css('color','red');
  118.         $('#lat').focus();
  119.       }
  120.     });
  121.     /* 非空判断 end */
  123.       /* 添加 start */
  124.       $('button').click(function(){
  125.         if(area_name != null && pinyin != null && first_pinyin != null && lng != null && lat != null){
  126.           $.ajax({
  127.               url:"http://admin.ouyangke.cn/index.php/api/index/prov_add",
  128.               type:"post",
  129.               data:{
  130.                   area_name: area_name,
  131.                   first_pinyin: first_pinyin,
  132.                   lat: lat,
  133.                   lng: lng,
  134.                   pinyin: pinyin
  135.               },
  136.               dataType:"json",
  137.               success(data,status){
  138.                   alert('添加成功！');
  139.                   console.log(status);
  140.                   window.location.href = "index.html"
  141.               },
  142.               error(e){
  143.                   console.log(e);
  144.               }
  145.           });
  146.         }else{
  147.           alert('请检查填写是否又空值！！！')
  148.         }
  149.       });
  150.         /* 添加 end */
  152.   </script>
  153. </html>
  1. /* 修改 */
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>updata</title>
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  10.   </head>
  11.   <body>
  12.     <style>
  13.       * {
  14.         background-color: #d4edda;
  15.         text-align: center;
  16.         font-size: 20px;
  17.       }
  18.       .form-control {
  19.         width: 500px;
  20.         padding: 0.375rem 0.75rem;
  21.         font-size: 1rem;
  22.         font-weight: 400;
  23.         line-height: 1.5;
  24.         color: #495057;
  25.         background-color: #fff;
  26.         background-clip: padding-box;
  27.         border: 1px solid #ced4da;
  28.         border-radius: 0.25rem;
  29.         transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  30.       }
  31.       button {
  32.         width: 600px;
  33.         color: #fff;
  34.         background-color: #28a745;
  35.         border-color: #28a745;
  36.       }
  37.       .select {
  38.         width: 265px;
  39.         height: 47px;
  40.       }
  41.     </style>
  42.     <h2 class="title">修改省</h2>
  43.     <form action="" onsubmit="return false;">
  44.       <p>
  45.         省名称:
  46.         <input type="text" class="form-control" id="area_name" /><span></span>
  47.       </p>
  48.       <p>
  49.         首字母:
  50.         <input type="text" class="form-control" id="pinyin" /><span></span>
  51.       </p>
  52.       <p>
  53.         拼音:
  54.         <input type="text" class="form-control" id="first_pinyin" /><span></span>
  55.       </p>
  56.       <p>
  57.         精度:
  58.         <input type="text" class="form-control" id="lng" /><span></span>
  59.       </p>
  60.       <p>
  61.         维度:
  62.         <input type="text" class="form-control" id="lat" /><span></span>
  63.       </p>
  64.       <button>按钮</button>
  65.       <div id="msg" style="margin-top: 20px; color: Red; display: none"></div>
  66.     </form>
  67.   </body>
  68.   <script>
  69.     // 1、修改省 - 
  70.     //           获取省份：http://admin.ouyangke.cn/index.php/api/index/prov_one - 
  71.     //           修改接口：http://admin.ouyangke.cn/index.php/api/index/prov_edit 
  72.     // 2、删除省 - 
  73.     //           删除接口：http://admin.ouyangke.cn/index.php/api/index/prov_del
  74. /* 非空判断 start */
  75.     $('#area_name').blur(function(){
  76.       if($(this).val() != "") {
  77.         $('#area_name').next().text("");
  78.         area_name = $('#area_name').val();
  79.         // console.log(area_name)
  80.       }else{
  81.         $('#area_name').next().text("省份名称不能为空！").css('color','red');
  82.         $('#area_name').focus();
  83.       }
  84.     });
  85.     $('#pinyin').blur(function(){
  86.       if($(this).val() != "") {
  87.         $('#pinyin').next().text("");
  88.         pinyin = $('#pinyin').val();
  89.       }else{
  90.         $('#pinyin').next().text("首字母不能为空！").css('color','red');
  91.         $('#pinyin').focus();
  92.       }
  93.     });
  94.     $('#first_pinyin').blur(function(){
  95.       if($(this).val() != "") {
  96.         $('#first_pinyin').next().text("");
  97.         first_pinyin = $('#first_pinyin').val();
  98.       }else{
  99.         $('#first_pinyin').next().text("拼音不能为空！").css('color','red');
  100.         $('#first_pinyin').focus();
  101.       }
  102.     });
  103.     $('#lng').blur(function(){
  104.       if($(this).val() != "") {
  105.         $('#lng').next().text("");
  106.         lng = $('#lng').val();
  107.       }else{
  108.         $('#lng').next().text("精度不能为空！").css('color','red');
  109.         $('#lng').focus();
  110.       }
  111.     });
  112.     $('#lat').blur(function(){
  113.       if($(this).val() != "") {
  114.         $('#lat').next().text("");
  115.         lat = $('#lat').val();
  116.       }else{
  117.         $('#lat').next().text("纬度不能为空！").css('color','red');
  118.         $('#lat').focus();
  119.       }
  120.     });
  121.     /* 非空判断 end */
  122.     let id = window.location.href.split("=")[1]; // 获取首页传递的id
  123.     /* 修改绑定 start */
  124.     $.ajax({
  125.         url:"http://admin.ouyangke.cn/index.php/api/index/prov_one",
  126.         type:"post",
  127.         data:{
  128.           area_id:id,
  129.         },
  130.         dataType:"json",
  131.         success(data,status){
  132.             $('#area_name').val(data.data.area_name);
  133.             $('#pinyin').val(data.data.pinyin);
  134.             $('#first_pinyin').val(data.data.first_pinyin);
  135.             $('#lat').val(data.data.lat);
  136.             $('#lng').val(data.data.lng);
  137.         },
  138.         error(e){
  139.           console.log("出错啦！！：" + e);
  140.         }
  141.     });
  142.     /* 修改绑定 end */
  144.     /* 修改 start */
  145.     $('button').click(function(){
  146.         $.ajax({
  147.         url:"http://admin.ouyangke.cn/index.php/api/index/prov_edit",
  148.         type:"post",
  149.         data:{
  150.           area_id:id,
  151.           area_name : $('#area_name').val(), 
  152.           pinyin : $('#pinyin').val(), 
  153.           first_pinyin : $('#first_pinyin').val(), 
  154.           lng : $('#lng').val(), 
  155.           lat : $('#lat').val()
  156.         },
  157.         dataType:"json",
  158.         success(data){
  159.          console.log(data)
  160.          window.location.href = "index.html"
  161.         },
  162.         error(e){
  163.           console.log("出错啦！！：" + e);
  164.         }
  165.       });
  166.     })
  167.     /* 修改 end */
  168.   </script>
  169. </html>
上一条：07-13作业下一条：演示文本操作、演示样式属性操作 、演示 效果操作、演示节点功能操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多