axios发送AJAX请求

最新推荐文章于 2023-01-30 21:49:29 发布

林之.

最新推荐文章于 2023-01-30 21:49:29 发布

阅读量316

点赞数

分类专栏： ajax 文章标签：前端 ajax

本文链接：https://blog.csdn.net/m0_51144154/article/details/121446129

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

axios发送AJAX请求

1). server.js

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装

//axios服务
app.all('/axios-server', (request, response) => {
    //'/server'就相当于一个url
    
        //设置响应头、设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')

    //设置接收所有相应头
    response.setHeader('Access-Control-Allow-Headers','*')
    //我之前一直出现跨域报错是因为我的Headers没有加s
        
        //设置响应体
    const data = { name: '尚硅谷' };
    response.send(JSON.stringify(data));
});

//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已经启动，8000端口监听中...')
})

2）axios发送ajax请求.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">
    <title>Document</title>
    <script crossorigin = "anonymous" src ="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>">
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
</body>
<script>
    //获取所有button按钮
    const btns = document.querySelectorAll('button');

    //配置 baseURL
    axios.defaults.baseURL = "http://127.0.0.1:8000"
    

    //axios GET方式发送请求
    btns[0].onclick = function(){
        //GET请求
        axios.get('/axios-server',{
//如果不舍值baseURL则上面前半部分要写成 axios.get('http://127.0.0.1:8000/axios-server'

            //url参数
            params:{
                id:100,
                vip:7,
            },
            
            //请求头信息
            headers:{
                name:'atguigu',
                age:20
            },


            //axios的数据返回与处理
        }).then(value => {
            //打印响应所有信息 最好形参用response
            console.log(value);
        });
    }

    //axios POST方式发送请求
    btns[1].onclick = function(){

        //post请求中第一个参数是url，第二个参数是请求体，第三个参数是其他配置
        axios.post('/axios-server',{
                username:'admin',
                pw:'amdin10025'
            },{

            //url参数
            params:{
                id:400,
                vip:7,
            },


            //设置请求头信息
            headers:{
                name:'yxlfirsttest',
                age:20,
            },

            //请求体
        }).then(value =>{
            //打印响应所有信息 最好形参用response
            console.log(value);
        });
    }


    //axios通用方式发送请求
    btns[2].onclick = function(){
        axios({

            //请求方法
            method :'POST',

            //url
            url:'/axios-server',

            //请求头参数
            headers:{
                a:100,
                b:200,
            },

            //请求体参数
            data:{
                username:'通用方法',
                pw:'123456',
            }
        }).then(response => {
            //打印响应所有信息
            console.log(response);

            //打印响应状态码
            console.log(response.status);

            //打印响应状态字符串
            console.log(response.statusText);

            //打印响应头
            console.log(response.headers);

            //打印响应体
            console.log(response.data);
        });
    }
</script>
</html>

注意：
crossorigin = “anonymous” : 跨源请求属性设置，（annonymous:匿名）加了这个属性之后向被加的那个资源发送请求时当不会携带当前域名下的cookie

林之.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
axios发送AJAX请求

crossorigin = “anonymous” : 跨源请求属性设置，（annonymous:匿名）加了这个属性之后向被加的那个资源发送请求时当不会携带当前域名下的cookienpm 被全球超过1100完开发人
复制链接

扫一扫