使用Ajax传递post请求参数

    技术2024-01-03  99

    post请求必须在请求报文中明确设置请求的类型

    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    post请求要写在send方法里

    //post请求要把请求参数写在send方法中 xhr.send(parase); <!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; let parase = 'username='+userValue + '$password=' +pasdValue; //创建Ajax对象 const xhr = new XMLHttpRequest(); //告诉Ajax对象以什么方式向哪个地址发送请求 xhr.open('post','http://localhost:80/post'); //post请求必须手动设置 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //post请求要把请求参数写在send方法中 xhr.send(parase); xhr.onload=function(){ console.log(xhr.responseText); } } </script> </body> </html>

    服务端代码

    const express = require('express'); //引入系统模块path const path = require('path'); //引入第三方模块用于获取post请求参数 const bodyParse = require('body-parser'); //创建服务器 const app = express(); //在req下添加方法 app.use(bodyParse.urlencoded({extends:false})); //设置静态资源 app.use(express.static(path.join(__dirname,'public'))) //Ajax传递post请求 app.post('/post',(req,res)=>{ //将post请求参数响应给客户端 res.send(req.body); }) app.listen(80); console.log('服务器创建成功');
    Processed: 0.013, SQL: 9