126.AJAX封装_请求参数

最新推荐文章于 2023-04-10 09:44:38 发布

想成为数据分析师的开发工程师

最新推荐文章于 2023-04-10 09:44:38 发布

阅读量173

点赞数

分类专栏： Flask 文章标签： javascript ajax flask python

本文链接：https://blog.csdn.net/m0_63953077/article/details/127161535

版权

Flask 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

<!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">
    <title>AJAX封装_请求参数</title>
</head>
<body>
    <h1>AJAX封装_请求参数</h1>
    <input type="button" value="请求数据get" onclick="data_get()">
    <input type="button" value="请求数据post" onclick="data_post()">

    <script>
        function AJAX(options) {
        /**
         * options:
         * type:请求方式
         * url：请求地址
         * data：请求参数，类型是json
         * data注意：在get请求中需要显示在url地址中，作为请求参数；在post请求中，不用写在url地址中
         * 所以两种请求需要区分去写
         */

            let xhr = new XMLHttpRequest()
            // 处理请求参数
            let params = ''
            for (let key in options.data){
                value = options.data[key]
                params = params + key + '='+ value + '&'
            }
            //去掉最后一个&
            params = params.substr(0,params.length-1)
            //get请求拼接参数（传递参数）
            if(options.type == 'get'){
                options.url = options.url + '?' +params
            }
            xhr.open(options.type, options.url)
            // post参数请求
            if(options.type == 'post'){
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                xhr.send(params)
            }else{
                xhr.send()
            }
            xhr.onreadystatechange = ()=>{
                if(xhr.readyState ==4 && xhr.status ==200){
                    console.log(xhr.responseText);
                }
            }
        }
        // "url": "http://httpbin.org/get?name=sxt&pwd=123"
        function data_get() {
            AJAX({
                type:'get',
                url:'http://httpbin.org/get',
                data:{'name':'sxt','pwd':123}
            })
            
        }
        // "url": "http://httpbin.org/post"
        function data_post() {
            AJAX({
                type:'post',
                url:'http://httpbin.org/post',
                data:{'name':'sxt','pwd':123}
            })
            
        }
    </script>
</body>
</html>