Ajax基础：向服务器端传递get请求参数

最新推荐文章于 2022-03-26 17:42:04 发布

昔冰_G

最新推荐文章于 2022-03-26 17:42:04 发布

阅读量1.1k

点赞数

分类专栏： Ajax 文章标签： ajax javascript

本文链接：https://blog.csdn.net/qq_38800316/article/details/120392330

版权

Ajax 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

客户端 03ajax.html 的代码：

<body>
    <p><input type="text" name="" id="username"></p>
    <p><input type="text" name="" id="age"></p>
    <p><input type="button" name="" value="提交" id="btn"></p>

    <script>
        var btn = document.getElementById('btn');
        var usernameV = document.getElementById('username');
        var ageV = document.getElementById("age");

        btn.addEventListener('click', function() {
            var name = usernameV.value;
            var age = ageV.value;
            var params = 'username=' + name + '&age=' + age;
            // 创建ajax对象
            var aj = new XMLHttpRequest();
            // 配置ajax对象
            aj.open('get', 'http://localhost:3000/get?' + params)
            // 发送请求
            aj.send();
            // 获取服务器端响应的数据
            aj.onload = function() {
                console.log(aj.responseText);
            }
        })
    </script>
</body>

填写完input后，提交按钮添加的点击事件，会将两个input的值进行收录然后同&进行字符串拼接

最后将拼接好的字符串作为请求参数拼接到ajax对象的open()方法的第二个参数来进行请求

服务器端 app.js 代码：

const express = require('express');
const path=require('path');
const app = express();
 
//指明静态文件目录位置，以便浏览器中对（客户端）静态文件的加载
app.use(express.static(path.join(__dirname, 'public')));
 
app.get('/get',(req,res)=>{
    res.send(req.query);
})
 
app.listen(3000);
console.log('3000已启动');

服务器端经由req.query来获取get请求参数，并将这个请求参数又响应给客户端

客户端responseText获取响应数据完成后，触发onload事件于控制台中输出

昔冰_G

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础：向服务器端传递get请求参数

客户端 03ajax.html 的代码：<body> <p><input type="text" name="" id="username"></p> <p><input type="text" name="" id="age"></p> <p><input type="button" name="" value="提交" id="btn"></p>
复制链接

扫一扫