Axios的配置

最新推荐文章于 2025-04-25 02:58:45 发布

CV键都碎了

最新推荐文章于 2025-04-25 02:58:45 发布

阅读量100

点赞数

本文链接：https://blog.youkuaiyun.com/sinat_33940108/article/details/115399173

版权

分别配置四个按钮： POST GET PUT DELETE

<!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>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>PUT</button>
    <button>DELETE</button>
    <script>
        // console.log(axios);
        //获取按钮
        const btn = document.querySelectorAll('button');

        btn[0].onclick = function(){
            //发送AJAX请求
            axios({
                //请求类型
                method: 'GET',
                //URL
                url: 'http://localhost:3000/posts/0',
            
            }).then(response => {
                console.log(response);
            });
        }

        //更新数组
        btn[1].onclick = function(){
            //发送AJAX请求
            axios({
                //请求类型
                method: 'POST',
                //URL
                url: 'http://localhost:3000/posts',
                //设置请求体
                data: {
                    title: "今天天气真好",
                    author: "Paul"
                }

            }).then(response => {
                console.log(response);
            });
        }

        btn[2].onclick = function(){
            //发送AJAX请求
            axios({
                //请求类型
                method: 'PUT',
                //URL
                url: 'http://localhost:3000/posts/1',
                //设置请求体
                data: {
                    title: "今天天气真好",
                    author: "李四"
                }
            
            }).then(response => {
                console.log(response);
            });
        }


        btn[3].onclick = function(){
            //发送AJAX请求
            axios({
                //请求类型
                method: 'Delete',
                //URL
                url: 'http://localhost:3000/posts/1',
            
            }).then(response => {
                console.log(response);
            });
        }
    </script>
</body>
</html>