使用Ajax传递get请求参数

技术2023-12-19 77

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

Processed: 0.010, SQL: 9