使用Ajax传递get请求参数

最新推荐文章于 2023-11-15 20:51:09 发布

bikeshedding

最新推荐文章于 2023-11-15 20:51:09 发布

阅读量7.8k

点赞数 2

分类专栏： Ajax

本文链接：https://blog.csdn.net/forljnlearning/article/details/107110344

版权

Ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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('服务器创建成功');

bikeshedding

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用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>
复制链接

扫一扫