把post和get方法封装成js文件

最新推荐文章于 2024-01-12 08:38:35 发布

涵儿soso

最新推荐文章于 2024-01-12 08:38:35 发布

阅读量250

点赞数

分类专栏： ajax 文章标签： ajax html

本文链接：https://blog.csdn.net/weixin_44424013/article/details/116851751

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

把post和get方法封装成js文件

代码如下（示例）：

//避免重名
var util ={
    get:function(url,query,callback,isJson) {
        if(query){
            url +='?'
            for(var key in query){
                url+= `${key}=${query[key]}&`
            }
            //0开始到倒数第一个结束，去掉最后一个字符&
            url=url.slice(0,-1)
        }
        //建立一个对象
        var xhr=new XMLHttpRequest()
        //打开连接
        xhr.open('get',url)
        xhr.send()
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status===200){
                    var res =isJson?JSON.parse(xhr.responseText):xhr.responseText
                    //成功拿结果，拿到结果可以解析，这里封装用callback
                    callback(res)
                    //封装结束

                }
            }
        }
    },
    post:function(url,query,callback,isJson) {
        var str =''
        if(query){
            for(var key in query){
                str+= `${key}=${query[key]}&`
            }
            //0开始到倒数第一个结束，去掉最后一个字符&
            str=str.slice(0,-1)
        }
        //建立一个对象
        var xhr=new XMLHttpRequest()
        //打开连接
        xhr.open('POST',url)
        //post与get不同，需要在send之前写一个请求头jsonp
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send(str)
        //不管是get post都需要监听状态码
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status===200){
                    var res =isJson?JSON.parse(xhr.responseText):xhr.responseText
                    //成功拿结果，拿到结果可以解析，这里封装用callback
                    callback(res)
                    //封装结束

                }
            }
        }
    },
    //parmas:object:{method,url,query,callback,isJson}
    ajax:function(parmas){
        var xhr=new XMLHttpRequest()
        //判断是get、、post
        if(parmas.method.toLowerCase ==='get'){
            if(parmas.query){
                parmas. url +='?'
                for(var key in parmas.query){
                    url+= `${key}=${parmas.query[key]}&`
                }
                url=url.slice(0,-1)
            }
            xhr.open('get',parmas.url)
            xhr.send()

        }else{
            //post
            var str=''
            if(parmas.query){
                for(var key in parmas.query){
                    str+= `${key}=${parmas.query[key]}&`
                }
                str=str.slice(0,-1)

            }
            xhr.open('post',parmas.url)
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.send(str)
        }
        //监听状态改变
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status===200){
                    var resp =parmas.isJson?JSON.parse(xhr.responseText):xhr.responseText
                    //成功拿结果，拿到结果可以解析，这里封装用callback
                    parmas.callback(resp)
                    //封装结束

                }
            }
        }


    }

}

index.html 引用


<!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">
    <script src="./util.js"></script>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>微服务查询界面</title>
</head>
<body>
    <ul id="wrap"></ul>
    <script>
        //http://119.29.216.85:10001/test
        util.post('http://119.29.216.85:10001/test',null,function(resp){
            console.log(resp)
        
            
        }   )

    </script>
    
</body>
</html>

涵儿soso

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
把post和get方法封装成js文件

把post和get方法封装成js文件前言js代码加粗样式提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言js代码前言把post和get方法封装成js文件，这样使用起来会比较简单提示：以下是本篇文章正文内容，下面案例可供参考js代码代码如下（示例）：//避免重名var util ={ get:function(url,query,callback,isJson) { if(query){ url +='?'
复制链接

扫一扫