23 尚硅谷 AJAX Axios发送AJAX请求

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

weixin_57709891

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

阅读量68

点赞数

分类专栏：【尚硅谷】【2020版】AJAX技术文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_57709891/article/details/120572985

版权

【尚硅谷】【2020版】AJAX技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该博客介绍了如何通过修改server.js和index.html文件，使用Axios库在浏览器环境中发送GET和POST AJAX请求。示例中展示了设置请求头、携带参数以及获取响应数据的方法，并提供了一个简单的交互按钮实现。

摘要由CSDN通过智能技术生成

23 尚硅谷 AJAX Axios发送AJAX请求

1 修改server.js代码

const express=require('express')
const app=express()
app.get('/server',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    res.setHeader('Access-Control-Allow-Headers','*')
    res.send("hello express")
})
app.all('/server',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    res.setHeader('Access-Control-Allow-Headers','*')
    res.send("hello express post")
})
app.all('/json-server',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    res.setHeader('Access-Control-Allow-Headers','*')
    const data={
        name:'atguigu'
    }
    let str=JSON.stringify(data)
    res.send(str)
})

app.all('/jquery-server',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    //res.send('hello jquery ajax')
    const data={name:'atguigu'}
    res.send(JSON.stringify(data))
})

app.all('/axios-server',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    res.setHeader('Access-Control-Allow-Headers','*')
    const data={
        name:'atguigu'
    }
    let str=JSON.stringify(data)
    res.send(str)
})

app.listen(8000,()=>{
    console.log("server is started,http://192.168.1.254:8000/server")
})

修改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">
    <title>jquery 发送 ajax 请求</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <SCript>
        const btns=document.querySelectorAll("button")
        axios.defaults.baseURL='http://192.168.1.254:8000'        
        btns[0].onclick=function(){
            axios.get('/axios-server',{
                params:{
                    id:100,
                    vip:7
                },
                headers:{
                    name:'atguigu',
                    age:20
                }
            }).then(value=>{
                console.log(value);
            })
        }
        btns[1].onclick=function(){
            axios.post('/axios-server',{
                    username:'admin',
                    password:'admin'
                },{
                params:{
                    id:100,
                    vip:7
                },
                headers:{
                    height:180,
                    weight:180
                }
            }).then(value=>{
                console.log(value);
            })
        }
    </SCript>
</body>

</html>

weixin_57709891

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23 尚硅谷 AJAX Axios发送AJAX请求

23 尚硅谷 AJAX Axios发送AJAX请求1 修改server.js代码const express=require('express')const app=express()app.get('/server',(req,res)=>{ res.setHeader('Access-Control-Allow-Origin','*') res.setHeader('Access-Control-Allow-Headers','*') res.send("hello
复制链接

扫一扫

专栏目录