使用Ajax传递get请求参数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="password" id="password">
    </p>
    <p>
        <input type="button" id='btn' value="提交">
    </p>
    <script>

        var btn = document.querySelector("#btn");
        btn.onclick = function () {
            let userValue = document.querySelector("#username").value;
            let pasdValue = document.querySelector("#password").value;
            //拼接get请求参数 以问号分割多个参数用&分割
            let parase = 'username='+userValue + '$password=' +pasdValue;
            //创建Ajax对象
            const xhr = new XMLHttpRequest();
            //告诉Ajax对象以什么方式向哪个地址发送请求
            xhr.open('get','http://localhost:80/parameter?'+parase);
            //向服务器端发送请求
            xhr.send();
            xhr.onload=function(){
                console.log(xhr.responseText);
            }
        }
    </script>   
</body>

</html>

对应的路由

const express = require('express');
//引入系统模块path
const path = require('path');
//创建服务器
const app = express();
app.use(express.static(path.join(__dirname,'public')))
//设置静态资源
app.get('/parameter',(req,res)=>{
    res.send(req.query);
})
app.listen(80);
console.log('服务器创建成功');

使用Ajax传递get请求参数

悦读