AJAX函数封装

最新推荐文章于 2023-12-27 15:11:11 发布

qh0526wy

最新推荐文章于 2023-12-27 15:11:11 发布

阅读量334

点赞数

分类专栏： Python 文章标签： html5 javascript ajax

本文链接：https://blog.csdn.net/qh0526wy/article/details/127183517

版权

Python 专栏收录该内容

26 篇文章 6 订阅

订阅专栏

1.先说明ajax代码是放在html里，但是不能直接点html文件运行，应该放在服务器中运行，否则会一直报错“net::ERR_FAILED”；正确的方式应该是放在服务器中运行，本人使用的django框架。

django视图代码

路由代码

2.AJAX代码 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QhAjax</title>
</head>
<body>
<script type="text/javascript">
    function qh_ajax(qh_options) {
        // 设置参数的默认值
        var qh_defaults = {
            qh_method: 'get',
            qh_url: '',
            qh_data: {},
            qh_header: {
                'Content-Type': 'application/x-www-from-urlencoded'
            },
            qh_success: function () {
            },
            qh_error: function () {
            },
        };
        // 使用传递qh_options参数属性 覆盖qh_defaults参数默认的属性
        Object.assign(qh_defaults, qh_options);
        //创建AJAX对象
        var qh_xhr = new XMLHttpRequest();
        // 拼接请求参数的变量
        var qh_params = '';
        for (var qh_row in qh_defaults.qh_data) {
            //拼接转换字符串请求参数
            qh_params += qh_row + '=' + qh_defaults.qh_data[qh_row] + '&';
        }
        // 截取掉最后的&符号
        qh_params = qh_params.substr(0, qh_params.length - 1);
        console.log(qh_params);
        // 如果是get请求，先拼接url参数
        if (qh_defaults.qh_method == 'get') {
            qh_defaults.qh_url = qh_options.qh_url + '?' + qh_params;
            console.log(qh_defaults.qh_url)
        }
        // 配置参数
        qh_xhr.open(qh_defaults.qh_method, qh_defaults.qh_url);
        // 发送post请求
        if (qh_defaults.qh_method == 'post') {
            var qh_ContentType = qh_defaults.qh_header['Content-Type'];
            // 如果是post请求，必须设置这个请求头参数类型
            qh_xhr.setRequestHeader('Content-Type', qh_ContentType);
            // post如果是json个格式参数
            if (qh_ContentType == 'application/json') {
                var qh_json = JSON.stringify(qh_defaults.qh_data)
                qh_xhr.send(qh_json);
                // json以外的参数
            } else {
                qh_xhr.send(qh_params);
            }
            // 发送get请求
        } else {
            qh_xhr.send();
        }
        //监听XHR对象下面的onload事件
        // 当xhr对象接收完响应数据后触发
        qh_xhr.onload = function () {
            // qh_xhr.getResponseHeader 获取响应头信息
            var qh_contenttype = qh_xhr.getResponseHeader('Content-Type');
            console.log(qh_contenttype);
            var qh_resonseTest = qh_xhr.responseText;
            // 如果请求响应回来的数据是json格式，则需要转换为json对象
            if (qh_resonseTest.includes('application/json')) {
                qh_resonseTest = JSON.parse(qh_resonseTest)
            }
            // 请求成功调用的函数
            if (qh_xhr.status == 200) {
                qh_defaults.qh_success(qh_resonseTest, qh_xhr);
            } else {
                qh_defaults.qh_error(qh_resonseTest, qh_xhr)
            }
        }
    }

    qh_ajax({
        qh_method: 'post',
        qh_url: 'http://127.0.0.1:8000/QhZhuCeL001/qhajaxjson/',
        qh_data: {
            qh_name: 'quehui',
            age: 18
        },
        qh_header: {
            'Content-Type': 'application/json'
        },
        qh_success: function (qh_data, qh_xhr) {
            console.log(qh_data);
            console.log(qh_xhr);
        },
        qh_error: function (qh_data, qh_xhr) {
            console.log(qh_data);
            console.log(qh_xhr);
        }
    })
</script>

{#/*#}
{#请求参数：#}
{#1.请求参数的位置问题#}
{#    将请求参数传递到Ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置；#}
{#    GET请求放在地址后面#}
{#    POST请求放在send方法中#}
{#2.请求参数格式的问题#}
{#    application/x-www-form-urlencoded#}
{#        参数名称 = 参数值 & 参数名称 = 参数值#}
{#    application/json#}
{#        {name:'',age:''}#}
{#    传递对象数据类型对于函数调用者更加友好#}
{#    在函数内部对象数据类型转换位字符串类型更加方便#}
{#*/#}
</body>
</html>

运行效果：

qh0526wy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX函数封装

应该放在服务器中运行，否则会一直报错“net::ERR_FAILED”；1.先说明ajax代码是放在html里，但是。正确的方式应该是放在服务器中运行。，本人使用的django框架。2.AJAX代码 html。django视图代码。
复制链接

扫一扫