jQuery+AJAX请求的统一封装

迷南。 2024-02-26 01:58 97阅读 0赞

记录一下使用jQuery+AJAX对http请求的统一封装

很久都没有使用jquery和ajax的组合了，这里记录一下jquery和ajax的组合简单封装 将来或许有机会重新启用这个组合

新建jquery.request.js；demo目录结构如下  
![myw][]

index.html里jquery的引用必须放在request的前面

后端使用SpringBoot写了get和post请求登录的2个接口示例  
![myw][myw 1]  
![myw][myw 2]  
这里使用的是application/x-www-form-urlencoded;charset=UTF-8，一般我们使用的都是json数据，于是呢可以改变下jquery.request.js

**application/json;charset=UTF-8**

// requet ajax json token
    function httpJsonRequest (url, method, data = {
        }, token, contentType, back){
        
        $.ajax({
        
            url: baseURL+url,
            type: method,
            data: JSON.stringify(data),
            cache: false,
            timeout: timeout,
            headers: {
        'token': token},
            contentType: contentType,
            dataType: "json",
            success: function(res){
        
                console.log(res)
                return typeof back == "function" && back(res);
            },
            error: function(error) {
        
                console.log(error)
                return typeof back == "function" && back(null);
            }
        });   
    };
    function getAjaxJsonHttpRequst (url, data, token, callBack) {
        
        httpJsonRequest(url, "GET", data, token, "application/json;charset=UTF-8", function(res) {
        
            return typeof callBack == "function" && callBack(res)
        })
    };
    function postAjaxJsonHttpRequst (url, data, token, callBack) {
        
        httpJsonRequest(url, "POST", data, token, "application/json;charset=UTF-8", function(res) {
        
            return typeof callBack == "function" && callBack(res)
        })
    };

index.html

$(function() {
        
        requestJsonGetLoginDemo();
        requestJsonPostLoginDemo();
    });
    
    function requestJsonGetLoginDemo() {
        
        var username = "myyhtw"; 
        var password = "123456";
        getAjaxJsonHttpRequst('/auth/login/'+username+"/"+password, null, null, function(res) {
        
            console.log(res)
            if(res){
        
                console.log("需要的数据")
            } else {
        
                console.log("返回数据不存在或者请求数据失败")
            }
        })
    }
    
    function requestJsonPostLoginDemo() {
        
        var data = {
         username: "myyhtw", password: "123456"}
        postAjaxJsonHttpRequst('/auth/login', data, null, function(res) {
        
            console.log(res)
            if(res){
        
                console.log("需要的数据")
            } else {
        
                console.log("返回数据不存在或者请求数据失败")
            }
        })
    }

后端使用SpringBoot写了get和post请求json格式登录的2个接口示例

![myw][myw 3]  
![myw][myw 4]

完整jquery.request.js

index.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery.request.js"></script>
        <title>jquery.request-demo</title>
        <style></style>
    </head>
    
    <body>
    
    <div class="">
    
    </div>
    <script type="text/javascript">
    
        $(function() {
        
            // requestGetLoginDemo();
            // requestPostLoginDemo();
            requestJsonGetLoginDemo();
            requestJsonPostLoginDemo();
        });
    
        function requestJsonGetLoginDemo() {
        
            var username = "myyhtw"; 
            var password = "123456";
            getAjaxJsonHttpRequst('/auth/login/'+username+"/"+password, null, null, function(res) {
        
                console.log(res)
                if(res){
        
                    console.log("需要的数据")
                } else {
        
                    console.log("返回数据不存在或者请求数据失败")
                }
            })
        }
    
        function requestJsonPostLoginDemo() {
        
            var data = {
         username: "myyhtw", password: "123456"}
            postAjaxJsonHttpRequst('/auth/login', data, null, function(res) {
        
                console.log(res)
                if(res){
        
                    console.log("需要的数据")
                } else {
        
                    console.log("返回数据不存在或者请求数据失败")
                }
            })
        }
    
    
        function requestGetLoginDemo() {
        
            var data = {
         username: "myyhtw", password: "123456"}
            getAjaxRequst('/auth/login', data, function(res) {
        
                console.log(res)
                if(res){
        
                    console.log("需要的数据")
                } else {
        
                    console.log("返回数据不存在或者请求数据失败")
                }
            })
        }
    
        function requestPostLoginDemo() {
        
            var data = {
         username: "myyhtw", password: "123456"}
            postAjaxRequst('/auth/login', data, function(res) {
        
                console.log(res)
                if(res){
        
                    console.log("需要的数据")
                } else {
        
                    console.log("返回数据不存在或者请求数据失败")
                }
            })
        }
    
        
    </script>
    
    </body>
    
    </html>

[myw]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/738715c245024ac6be6abb8c101e4a88.png
[myw 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/b7ffad8e1d8c4607916054b1791694c7.png
[myw 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/3d8103f65dce4ac886e68e7ef76ccd2f.png
[myw 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/54e66bc8131544428c6b6c26b303e0f7.png
[myw 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/feb7bf9e28724863b3b57815d496474b.png