【Ajax】Axios发送ajax请求

最新推荐文章于 2023-07-19 17:12:46 发布

CodeBoyWLC

最新推荐文章于 2023-07-19 17:12:46 发布

阅读量55

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/wlc19981111/article/details/116944610

版权

Ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
    <!--crossorigin="anonymous"以避免报警告-->
</head>

<body>
    <button>用GET发送请求</button>
    <button>用POST</button>
    <button>用AJAX</button>

    <script>
        const btns = document.querySelectorAll('button');
        axios.defaults.baseURL = 'http://127.0.0.1:8000';


        //
/*        btns[0].onclick = function () {
            //GET 请求
            axios.get('/server', { 
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息：key:value
                headers: {
                    name: 'xiaom',
                    age: 20
                }
            });
        }*/


        //添加请求成功的回调函数
        btns[0].onclick = function () {
            //GET 请求
            axios.get('/server', { 
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息：key:value
                headers: {
                    name: 'xiaom',
                    age: 20
                }
            }).then(value => {
                console.log(value);  
            });
        }





        //post请求
        btns[1].onclick = function () {
            axios.post('/server',
                {  //第2个参数为请求体
                username: 'admin',
                password: 'admin'
                },

                {  //第3个参数为其他配置
                //url
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            });
        }





        //通用方式
        btns[2].onclick = function(){
            axios({
                //请求方法
                method : 'POST',
                //url
                url: '/server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{   //回调函数
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>

</html>


//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则：
app.all('/server', (request, response) => {
    //设置响应头: 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'小明'};
    response.send(JSON.stringify(data));
});
//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
});

在这里插入图片描述

CodeBoyWLC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Ajax】Axios发送ajax请求

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>axios 发送 AJAX请求</title> <script crossorigin="anonymou
复制链接

扫一扫