search

博客列表 >第二十课 Ajax & POST方法

第二十课 Ajax & POST方法

Mr.Ran
Mr.Ran原创
2021年08月03日 09:41:30794浏览

$.post() 方法

  • 使用HTTP POST 方式请求服务器的数据
  • Jquery从服务器获取数据有两种数据格式：XML、JSON，常用JSON
  • 语法格式：$.post(url,data,function(),dataType)
    url：服务器的数据接口，一般为：网址、域名、IP地址
    data：传给服务器的数据
    function() ：接口返回的数据和状态
    dataType ：数据格式类型：XML、JSON

练习代码

引入 Jquer CDN：

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

HTML 代码片段

  1. <table border="1">
  2.     <tr>
  3.         <th>编号</th>
  4.         <th>名称</th>
  5.         <th>首字母</th>
  6.         <th>拼音</th>
  7.         <th>纬度</th>
  8.         <th>经度</th>
  9.     </tr>
  10. </table>
  11. <a href="#" id="up" >上一页</a>
  12. <a href="#" id="lower" >下一页</a>

JS代码

  1. <script>
  2.     var js_page = 1; //当前页
  3.     var js_pageline = 10; //每页行数
  4.     var js_count = 0; //总页数
  6.     page(js_page);
  8.     //下一页
  9.    $("#lower").click(function(){
  10.         if (js_page<js_count) {
  11.             js_page = js_page + 1;
  12.             console.log(js_page);
  13.             page(js_page);
  14.         }
  15.    })
  17.    //上一页
  18.    $("#up").click(function(){
  19.         if (js_page>1) {
  20.             js_page = js_page - 1;
  21.             console.log(js_page);
  22.             page(js_page);
  23.         }
  24.    })
  26.    //分页方法
  27.    function page(js_page){
  29.     if(js_page == 1){
  30.         $("#up").hide();
  31.        }else{
  32.         $("#up").show();
  33.        }
  35.        if(js_page == js_count){
  36.         $("#lower").hide();
  37.        }else{
  38.         $("#lower").show();
  39.        }
  41.         $.post(
  42.             "http://admin.ouyangke.cn/index.php/api/index/prov_list/",
  43.             {
  44.                 page:js_page,
  45.                 limit:js_pageline,
  46.                 fields:"area_id",
  47.                 order:"asc",
  48.             },
  49.             function(data,status){
  50.                     let html_data = "";
  51.                     for(let i = 0; i< data.data.length; i++){
  52.                         html_data += "<tr><td>"+data.data[i].area_id+"</td><td>"+data.data[i].area_name+"</td><td>"+data.data[i].pinyin+"</td><td>"+data.data[i].first_pinyin+"</td><td>"+data.data[i].lng+"</td><td>"+data.data[i].lat+"</td></tr>";
  53.                     }
  54.                     $("table").html(html_data);
  55.                     js_count = Math.ceil(data.count/js_pageline);
  56.             },
  57.             "json"
  58.         )
  59.    }
  61. </script>

Ajax

$.ajax 是jquery底层封装的一个方法

  • 语法：$.ajax({key:value})
  • 参数：
    url:必须、请求的接口
    data:数据接口、参数
    type：get、post
    async:是否要异步处理，布尔值
    dataType:服务器的数据类型
    timeout:超时时间，毫秒
  • 方法：
    success(data,status) 请求成功的方法
    error(data,status) 请求失败的方法
    complete(data,status) 不管成功还是失败，都会执行

异步处理：ajax代码，其他代码不会受它影响，会直接执行。

增加代码演示

URL数据接口
http://admin.ouyangke.cn/index.php/api/index/prov_add

引入 Jquer CDN：

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

html代码片段

  1. <form action="" onsubmit="return false">
  2.     <table border="1">
  3.         <tr><th>名称</th><td><input type="text" id="area_name"></td></tr>
  4.         <tr><th>首字母</th><td><input type="text" id="pinyin"></td></tr>
  5.         <tr><th>拼音</th><td><input type="text" id="first_pinyin"></td></tr>
  6.         <tr><th>纬度</th><td><input type="text" id="lng"></td></tr>
  7.         <tr><th>经度</th><td><input type="text" id="lat"></td></tr>
  8.     </table>
  9.     <button id="submit" >提交</button>
  10. </form>

JS 代码

  1. //添加
  2. $("form").submit(function(){
  3.     $.ajax({
  4.         url:"http://admin.ouyangke.cn/index.php/api/index/prov_add",
  5.         type:"POST",
  6.         data:{
  7.             area_name:$("#area_name").val(),
  8.             pinyin:$("#pinyin").val(),
  9.             first_pinyin:$("#first_pinyin").val(),
  10.             lng:$("#lng").val(),
  11.             lat:$("#lat").val(),
  12.         },
  13.         dataType:"json",
  14.         success(data,status){
  15.             alert(data.msg);
  16.             if (data.code!=1) {
  17.                 window.location.href ="ajax_list.html"; //跳转到列表页面
  18.             }
  19.         },
  20.     })
  21. })

修改代码演示

URL数据接口
http://admin.ouyangke.cn/index.php/api/index/prov_edit

引入 Jquer CDN：

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

html代码片段

  2. <form action="" onsubmit="return false">
  3.     <table border="1">
  4.         <tr><th>编号</th><td><span id="area_id"></span></td></tr>
  5.         <tr><th>名称</th><td><input type="text" id="area_name"></td></tr>
  6.         <tr><th>首字母</th><td><input type="text" id="pinyin"></td></tr>
  7.         <tr><th>拼音</th><td><input type="text" id="first_pinyin"></td></tr>
  8.         <tr><th>纬度</th><td><input type="text" id="lng"></td></tr>
  9.         <tr><th>经度</th><td><input type="text" id="lat"></td></tr>
  10.     </table>
  11.     <button id="submit" >修改提交</button>
  12. </form>

JS 代码

  1. <script>
  2.     //获取参数
  3.     var areaid =  getUrlVars(); 
  4.     var aid = areaid["id"];
  6.     //填充数据
  7.     $.ajax({
  8.         url:"http://admin.ouyangke.cn/index.php/api/index/prov_one",
  9.         type:"POST",
  10.         data:{area_id:aid},
  11.         dataType:"json",
  12.         success(data,status){
  13.             $("#area_id").text(aid);
  14.             $("#area_name").val(data.data["area_name"]);
  15.             $("#pinyin").val(data.data["pinyin"]);
  16.             $("#first_pinyin").val(data.data["first_pinyin"]);
  17.             $("#lng").val(data.data["lng"]);
  18.             $("#lat").val(data.data["lat"]);
  19.         }
  20.     })
  22.     //修改操作
  23.     $("form").submit(function(){
  24.         $.ajax({
  25.             url:"http://admin.ouyangke.cn/index.php/api/index/prov_edit",
  26.             type:"POST",
  27.             data:{
  28.                 area_id:aid,
  29.                 area_name:$("#area_name").val(),
  30.                 pinyin:$("#pinyin").val(),
  31.                 first_pinyin:$("#first_pinyin").val(),
  32.                 lng:$("#lng").val(),
  33.                 lat:$("#lat").val(),
  34.             },
  35.             dataType:"json",
  36.             success(data,status){
  37.                 alert(data.msg);
  38.                 if (data.code!=1) {
  39.                     window.location.href ="ajax_list.html";
  40.                 }
  41.             },
  42.         })
  43.     })
  46.     //获取链接参数的方法
  47.     function getUrlVars()
  48.     {
  49.         var vars = [], hash;
  50.         var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  51.         for(var i = 0; i < hashes.length; i++)
  52.         {
  53.             hash = hashes[i].split('=');
  54.             vars.push(hash[0]);
  55.             vars[hash[0]] = hash[1];
  56.         }
  57.         return vars;
  58.     }
  59. </script>

删除代码演示

URL数据接口
http://admin.ouyangke.cn/index.php/api/index/prov_del

引入 Jquer CDN：

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

HTML 代码片段：

  1. <table border="1">
  2.     <tr>
  3.         <th>编号</th>
  4.         <th>名称</th>
  5.         <th>首字母</th>
  6.         <th>拼音</th>
  7.         <th>纬度</th>
  8.         <th>经度</th>
  9.         <th colspan="2">操作</th>
  10.     </tr>
  11. </table>
  12. <a id="more" >更多</a>
  13. <a href="ajax_add.html">增加</a>

JS代码：

  1. <script>
  2.     var js_page = 1; //当前页
  3.     var js_pageline = 10; //每页行数
  4.     var js_count = 0; //总页数
  6.     page(js_page);
  8.     //下一页
  9.    $("#more").click(function(){
  10.         if (js_page<js_count) {
  11.             js_page = js_page + 1;
  12.             console.log(js_page);
  13.             page(js_page);
  14.         }
  15.    })
  17.    //分页方法
  18.    function page(js_page){
  20.     if(js_page == js_count){
  21.         $("#more").hide();
  22.        }else{
  23.         $("#more").show();
  24.        }
  26.         $.ajax({
  27.             url:"http://admin.ouyangke.cn/index.php/api/index/prov_list/",
  28.             data:{
  29.                 page:js_page,
  30.                 limit:js_pageline,
  31.                 fields:"area_id",
  32.                 order:"desc",
  33.             },
  34.             type:"POST",
  35.             async:true,
  36.             dataType:"json",
  37.             success(data,status){
  38.                 let html_data = "";
  39.                 for(let i = 0; i< data.data.length; i++){
  40.                     html_data += "<tr><td>"+data.data[i].area_id+"</td><td>"+data.data[i].area_name+"</td><td>"+data.data[i].pinyin+"</td><td>"+data.data[i].first_pinyin+"</td><td>"+data.data[i].lng+"</td><td>"+data.data[i].lat+"</td><th><button onclick='toEdit("+data.data[i].area_id+")'>修改</button></th><th><button onclick='del("+data.data[i].area_id+")'>删除</button></th></tr>";
  41.                 }
  42.                 $("table").append(html_data);
  43.                 js_count = Math.ceil(data.count/js_pageline);
  44.             }
  45.         })
  46.    }
  48.    //删除方法
  49.    function del(id){
  50.        $.ajax({
  51.             url:"http://admin.ouyangke.cn/index.php/api/index/prov_del",
  52.             data:{area_id:id},
  53.             type:"POST",
  54.             async:true,
  55.             dataType:"json",
  56.             success(data,status){
  57.                 if (data.code == 0) {
  58.                     alert("删除成功");
  59.                     window.location.href ="ajax_list.html";
  60.                 }else{
  61.                     alert(data.msg);
  62.                 }
  63.             }
  64.        })
  65.    }
  67.    //跳转修改页面
  68.    function toEdit(areaid) {
  69.        $.ajax({
  70.            data:{area_id:areaid},
  71.            type:"PSOT",
  72.            async:true,
  73.            dataType:"json",
  74.            complete:function(){
  75.                 location.href = "ajax_edit.html?id=" + areaid;
  76.            }
  77.        })
  78.    }
  79. </script>
上一条：flex 容器和项目 常用属性下一条：第十九课 表单事件&键盘事件&GET方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
ᝰꫛꫀꪝ吴2021-07-29 19:25:421楼
打算复合管

相关文章

查看更多