ajax中POST请求与参数(请求体)设置

最新推荐文章于 2024-08-08 09:12:41 发布

LuiChun

最新推荐文章于 2024-08-08 09:12:41 发布

阅读量5k

点赞数 1

分类专栏： nodejs web 前后端分离文章标签： javascript ajax html 前端 node.js

本文链接：https://blog.csdn.net/weixin_47021806/article/details/112001543

版权

web 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

nodejs

9 篇文章 0 订阅

订阅专栏

前后端分离

9 篇文章 0 订阅

订阅专栏

本文通过一个实例展示了如何使用Ajax在鼠标悬停事件中发送POST请求。在post.html文件中，当鼠标经过特定div时，会触发一个事件，创建XMLHttpRequest对象，初始化POST请求，设置请求URL为'http://127.0.0.1:8000/server'，并发送数据。同时，server.js文件中定义了接收POST请求的路由，设置响应头允许跨域，并返回响应内容。

摘要由CSDN通过智能技术生成

回到文章总目录

1.创建在testthree文件夹并在这个文件夹里面
2.创建post.html文件
3.创建server.js文件

本篇文章使用了当鼠标移动至方框内则发送请求示例

post.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax post 请求</title>
</head>
<body>
    <!-- id为result的div -->
    <div id="result" style="width:  200px;height: 100px;border: solid 1px #770088;">
        鼠标经过向服务器发送post请求，并把结果返回，展示在本div内
    </div>
    <script>
        // 获取元素
        const btn = document.getElementsByTagName('result');
        // 把获取到的响应体展示在div中
        const result = document.getElementById("result");
        // 2.绑定事件 
        // result.addEventListener('mouseover', function(){console.log('test');});
        result.addEventListener('mouseover', function(){
            // 0.测试打印
            console.log('test');
            // 1.创建对象
            const textone = new XMLHttpRequest();
            // 2.初始化，设置请求类型与URL
            // 第一个参数为[请求类型]
            // 第二个参数为[给那个url发送]
            textone.open('POST','http://127.0.0.1:8000/server');
            // 3.发送 POST参数
            // 没有参数是直接——textone.send();
            // 当有参数时，就直接写在这里面
            // 格式1:textone.send("a=100&b=200&c=300");
            // 格式2:textone.send("a:100&b:200&c:300")
            // 任意格式都可以的            但前提是服务端   设置好了接收的处理的方式
            textone.send("新年的第一个红包使我送给你的");
            // 4.事件绑定 处理服务端返回的结果
            textone.onreadystatechange = function(){
                // 判断 (服务端返回了所有的结果) 4
                if(textone.readyState === 4){
                    // 再次判断——响应状态码  
                    if(textone.status >= 200 && textone.status < 300){
                        // 处理服务端返回的结果
                        result.innerHTML = textone.response;
                    }else{}
                }
            }
        });
    </script>
</body>
</html>

server.js文件

// 1. 引入express
const express = require('express');

// 2.创建对象
const app = express();

// 3.创建路由规则  里面的形参 request与response   (自己可以随便定义名字的)
//  建议写成  request与response  因为可以见名思意，方便自己看
// request  对请求报文的封装
// responst 对响应报文的封装
//  请求路径为'/server'
app.post('/server', (request, response)=>{
    // 设置响应头 设置允许跨域
    // 头名字为Access-Control-Allow-Origin
    // 头的值为
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send('POST请求成功,路由设置为server,响应体为本段文字');

});

// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
    console.log("服务已经启动，8000端口监听中......");
});