jQuery ajax中dataFilter的用法

news2025/1/15 22:41:58

参考资料

jquery的ajax的dataFilter参数的使用

⏹用于处理 XMLHttpRequest 原始响应数据的函数

运行在success函数之前, 对Ajax请求返回的原始数据进行预处理
- 可以对返回的json数据中的null属性进行过滤
- 可以对返回的json数据添加一些自定义的属性
如果不返回原始数据,返回其他数据,success函数是不会运行的

⏹dataFilter参数

data: Ajax返回的原始数据
type: dataType中手动指定的预期的服务器响应的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #errorMessage {
            color: red;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <button id="btn">发送请求</button><br>
    <span id="errorMessage" hidden>出现了错误!</span>
</body>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
    btn.addEventListener('click', () => {
        $.ajax({
            url: 'https://api.github.com/users/fengyehong123',
            dataFilter(data, type) {

                if(!data) {
                    return data;
                }
                
                // 将json字符串转换为json对象
                const responseJson = JSON.parse(data);
                // 将json对象中的null属性给过滤掉
                const twoArray = Object.entries(responseJson).filter(([_, value]) => value != null);
                // 将二维数组转换为对象
                const filterObj = Object.fromEntries(twoArray);
                
                // 如果响应的数据的result属性为false的话
                if(filterObj?.result === false) {
                    $("#errorMessage").show();
                    return;
                }

                // 添加自定义的数据
                filterObj['custom_attr'] = 'jmw';
                return JSON.stringify(filterObj);
            },
            // 最终会反映在dataFilter方法的第2个参数上
            dataType: 'json',
            success(result, status, xhr) {
                console.log(result);
            },
            error(xhr, status, error) {
                console.log(error);
            }
        });
    });
</script>
</html>