初学ajax踩坑

req是客户端的请求 res是服务端的响应!!!理解清楚不要搞混了
服务端
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));

// app.use((req, res) => {
//     res.writeHead(200, {
//         'content-type': 'text/html;charset=utf8'
//     });
//     res.end('asdasdsada阿萨德撒大sdsadas')
// })

//新版express已经内置body-parser
app.use(express.urlencoded())
app.use(express.json()) //解析json对象数据 未知
app.get('/first', (req, res) => {
    res.send('<a>00hello</a>');
})

//03操作
app.get('/get', (req, res) => {
    res.send(req.query);
});

//04

app.post('/post', (req, res) => {
    res.send(req.query);
});


//05
app.post('/json', (req, res) => {
    console.log(req.body);
    // res.send(req.query);  //这里注意返回是body  不是query!!!!!!!!!!!get才是!!!!!!!!!!11111
    res.send(req.body)
});




app.listen(3000);
console.log('服务器启动成功');
 
 
 
//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>
</head>

<body>
    <div></div>
    <script type="text/javascript">
        // XMLHttpRequest ajax对象
        var xhr = new XMLHttpRequest();
        //告诉ajax对象向哪里发送请求,以什么方式
        //open第一个方法是请求方式 第二个是请求地址
        xhr.open('post', 'http://localhost:3000/json');
        //请求头告诉客户端向服务器传递的格式
        xhr.setRequestHeader('Content-Type', 'application/json');
        var aaa = {
                name: 'lisi',
                age: 1
            }
            //发送请求;
        xhr.send(JSON.stringify(aaa));
        //获取服务器端响应到客户端的数据’
        xhr.onload = function() {
            console.log(xhr.responseText);
        }
    </script>
</body>

</html>
posted @ 2021-12-17 20:01  ๑Secret  阅读(62)  评论(0编辑  收藏  举报