利用ajax实现前后端数据交互

最新推荐文章于 2024-08-31 09:23:33 发布

python-宁哥

最新推荐文章于 2024-08-31 09:23:33 发布

阅读量3.5k

点赞数 2

分类专栏：笔记文章标签： ajax 前后端通信

本文链接：https://blog.csdn.net/weixin_42901701/article/details/83375698

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax代码段：

$(function () {
    {#TODO:显示选中省份#}
    $('#se_province').change(function () {
        var province = $('#se_province').val()
        var urlString1 = 'http://127.0.0.1:8000/find_medium_exam'
        var urlString2 = 'http://127.0.0.1:8000/find_high_exam'
        $.ajax({
            url: urlString1,
            // 请求类型是POST还是GET
            type: 'GET',
            // 异步还是同步 默认是异步，false表示同步
            async: true,
            // 发送数据
            data: {
                'province': province,
            },
            // 超时时间
            timeout: 5000,
            // 返回数据类型json数据
            dataType: 'json',
            // 成功返回处理
            success: function (data, textStatus, jqXHR) {
                //解析json数据
                console.log(data);
                console.log(textStatus);
                console.log(jqXHR);
                // 模拟服务器返回成功
                showMedium(data)
            },
            // 错误返回
            error: function (xhr, textStatus) {
                console.log('错误');
                console.log(xhr);
                console.log(textStatus);
            }
        });
        $.ajax({
            url: urlString2,
            // 请求类型是POST还是GET
            type: 'GET',
            // 异步还是同步 默认是异步，false表示同步
            async: true,
            // 发送数据
            data: {
                'province': province,
            },
            // 超时时间
            timeout: 5000,
            // 返回数据类型json数据
            dataType: 'json',
            // 成功返回处理
            success: function (data, textStatus, jqXHR) {
                //解析json数据
                console.log(data);
                console.log(textStatus);
                console.log(jqXHR);
                // 模拟服务器返回成功
                showHigh(data)
            },
            // 错误返回
            error: function (xhr, textStatus) {
                console.log('错误');
                console.log(xhr);
                console.log(textStatus);
            }
        });
    })
    {#TODO：显示中招信息#}
    function showMedium(data) {
        var items =$('#tag1>section>dl').remove()
        var div = $('#tag1>section')
        for (let i = 0; i < data.length; i++) {
            var dl = $('<dl></dl>').addClass('class="w-all bd-td-d1d1d1 m-t-0 fl')
            for (var j = 0; j < 4; j++) {
                var dd = $('<dd></dd>').addClass('m-l-20 fs-14 line-h60 text-c ftc-646464 fl')
                switch (j) {
                    case 0:{
                        dd.addClass('w-170')
                        dd.html(data[i]['province__p_name'])
                        break;
                    }
                    case 1:{
                        dd.addClass('w-170')
                        dd.html(data[i]['date'])
                        break;
                    }
                    case 2:{
                        dd.addClass('w-170')
                        dd.html(data[i]['time_interval'])
                        break;
                    }
                    case 3:{
                        dd.addClass('w-420')
                        dd.html(data[i]['course'])
                        break;
                    }
                }
                dl.append(dd)
            }
            div.append(dl)
        }
        }
    {#TODO:显示高招日历#}
    function showHigh(data){
        $('#tag2>section>dl').remove()
        var div = $('#tag2>section')
        for (let i = 0; i < data.length; i++) {
            var dl = $('<dl></dl>').addClass('w-all bd-td-d1d1d1 m-t-0 fl')
            for (let j = 0; j < 4; j++) {
                var dd = $('<dd></dd>')
                switch (j) {
                    case 0:{
                        dd.addClass('w-170 m-l-20 fs-14 line-h60 text-c ftc-646464 fl')
                        dd.html(data[i]['province__p_name'])
                        break;
                    }
                    case 1:{
                        dd.addClass('w-170 m-l-20 fs-14 line-h60 text-c ftc-646464 fl')
                        dd.html(data[i]['date'])
                        break;
                    }
                    case 2:{
                        dd.addClass('w-170 m-l-20 fs-14 line-h60 text-c ftc-646464 fl')
                        dd.html(data[i]['time_interval'])
                        break;
                    }
                    case 3:{
                        dd.addClass('w-420 m-l-20 fs-14 line-h60 text-c ftc-646464 fl')
                        dd.html(data[i]['course'])
                        break;
                    }

                }
                dl.append(dd)
            }
            div.append(dl)
        }
}
})