Home > List of blog posts > 第二十课 Ajax & POST方法

Blogger Information

Blog 14

fans 0

comment 0

visits 9500

Special Recommendation

More>

Related recommendations

$.post() 方法

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

练习代码

引入 Jquer CDN：

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

HTML 代码片段

<table border="1">
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>首字母</th>
        <th>拼音</th>
        <th>纬度</th>
        <th>经度</th>
    </tr>
</table>
<a href="#" id="up" >上一页</a>
<a href="#" id="lower" >下一页</a>

JS代码

<script>
    var js_page = 1; //当前页
    var js_pageline = 10; //每页行数
    var js_count = 0; //总页数
    page(js_page);
    //下一页
   $("#lower").click(function(){
        if (js_page<js_count) {
            js_page = js_page + 1;
            console.log(js_page);
            page(js_page);
        }
   })
   //上一页
   $("#up").click(function(){
        if (js_page>1) {
            js_page = js_page - 1;
            console.log(js_page);
            page(js_page);
        }
   })
   //分页方法
   function page(js_page){
    if(js_page == 1){
        $("#up").hide();
       }else{
        $("#up").show();
       }
       if(js_page == js_count){
        $("#lower").hide();
       }else{
        $("#lower").show();
       }
        $.post(
            "http://admin.ouyangke.cn/index.php/api/index/prov_list/",
            {
                page:js_page,
                limit:js_pageline,
                fields:"area_id",
                order:"asc",
            },
            function(data,status){
                    let html_data = "";
                    for(let i = 0; i< data.data.length; i++){
                        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>";
                    }
                    $("table").html(html_data);
                    js_count = Math.ceil(data.count/js_pageline);
            },
            "json"
        )
   }
</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：

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

html代码片段

<form action="" onsubmit="return false">
    <table border="1">
        <tr><th>名称</th><td><input type="text" id="area_name"></td></tr>
        <tr><th>首字母</th><td><input type="text" id="pinyin"></td></tr>
        <tr><th>拼音</th><td><input type="text" id="first_pinyin"></td></tr>
        <tr><th>纬度</th><td><input type="text" id="lng"></td></tr>
        <tr><th>经度</th><td><input type="text" id="lat"></td></tr>
    </table>
    <button id="submit" >提交</button>
</form>

JS 代码

//添加
$("form").submit(function(){
    $.ajax({
        url:"http://admin.ouyangke.cn/index.php/api/index/prov_add",
        type:"POST",
        data:{
            area_name:$("#area_name").val(),
            pinyin:$("#pinyin").val(),
            first_pinyin:$("#first_pinyin").val(),
            lng:$("#lng").val(),
            lat:$("#lat").val(),
        },
        dataType:"json",
        success(data,status){
            alert(data.msg);
            if (data.code!=1) {
                window.location.href ="ajax_list.html"; //跳转到列表页面
            }
        },
    })
})

修改代码演示

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

引入 Jquer CDN：

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

html代码片段


<form action="" onsubmit="return false">
    <table border="1">
        <tr><th>编号</th><td><span id="area_id"></span></td></tr>
        <tr><th>名称</th><td><input type="text" id="area_name"></td></tr>
        <tr><th>首字母</th><td><input type="text" id="pinyin"></td></tr>
        <tr><th>拼音</th><td><input type="text" id="first_pinyin"></td></tr>
        <tr><th>纬度</th><td><input type="text" id="lng"></td></tr>
        <tr><th>经度</th><td><input type="text" id="lat"></td></tr>
    </table>
    <button id="submit" >修改提交</button>
</form>

JS 代码

<script>
    //获取参数
    var areaid =  getUrlVars(); 
    var aid = areaid["id"];
    //填充数据
    $.ajax({
        url:"http://admin.ouyangke.cn/index.php/api/index/prov_one",
        type:"POST",
        data:{area_id:aid},
        dataType:"json",
        success(data,status){
            $("#area_id").text(aid);
            $("#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"]);
        }
    })
    //修改操作
    $("form").submit(function(){
        $.ajax({
            url:"http://admin.ouyangke.cn/index.php/api/index/prov_edit",
            type:"POST",
            data:{
                area_id:aid,
                area_name:$("#area_name").val(),
                pinyin:$("#pinyin").val(),
                first_pinyin:$("#first_pinyin").val(),
                lng:$("#lng").val(),
                lat:$("#lat").val(),
            },
            dataType:"json",
            success(data,status){
                alert(data.msg);
                if (data.code!=1) {
                    window.location.href ="ajax_list.html";
                }
            },
        })
    })
    //获取链接参数的方法
    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
</script>

删除代码演示

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

引入 Jquer CDN：

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

HTML 代码片段：

<table border="1">
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>首字母</th>
        <th>拼音</th>
        <th>纬度</th>
        <th>经度</th>
        <th colspan="2">操作</th>
    </tr>
</table>
<a id="more" >更多</a>
<a href="ajax_add.html">增加</a>

JS代码：

<script>
    var js_page = 1; //当前页
    var js_pageline = 10; //每页行数
    var js_count = 0; //总页数
    page(js_page);
    //下一页
   $("#more").click(function(){
        if (js_page<js_count) {
            js_page = js_page + 1;
            console.log(js_page);
            page(js_page);
        }
   })
   //分页方法
   function page(js_page){
    if(js_page == js_count){
        $("#more").hide();
       }else{
        $("#more").show();
       }
        $.ajax({
            url:"http://admin.ouyangke.cn/index.php/api/index/prov_list/",
            data:{
                page:js_page,
                limit:js_pageline,
                fields:"area_id",
                order:"desc",
            },
            type:"POST",
            async:true,
            dataType:"json",
            success(data,status){
                let html_data = "";
                for(let i = 0; i< data.data.length; i++){
                    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>";
                }
                $("table").append(html_data);
                js_count = Math.ceil(data.count/js_pageline);
            }
        })
   }
   //删除方法
   function del(id){
       $.ajax({
            url:"http://admin.ouyangke.cn/index.php/api/index/prov_del",
            data:{area_id:id},
            type:"POST",
            async:true,
            dataType:"json",
            success(data,status){
                if (data.code == 0) {
                    alert("删除成功");
                    window.location.href ="ajax_list.html";
                }else{
                    alert(data.msg);
                }
            }
       })
   }
   //跳转修改页面
   function toEdit(areaid) {
       $.ajax({
           data:{area_id:areaid},
           type:"PSOT",
           async:true,
           dataType:"json",
           complete:function(){
                location.href = "ajax_edit.html?id=" + areaid;
           }
       })
   }
</script>

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

1 comments

ᝰꫛꫀꪝ吴 2021-07-29 19:25:42

打算复合管

1 floor

Author's latest blog post

第一课学习准备

2021-07-23 20:28:13