首页 > 其他分享 >如何用ajax发送post请求

如何用ajax发送post请求

时间:2024-10-14 15:46:10浏览次数:11  
标签:status POST server 发送 xhr ajax result post response

和get类似,稍作改动:

<!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>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result");
        result.addEventListener("mouseover", function () {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

</html>

server文件里加上

app.post('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

如图:即可到网页端查看效果

标签:status,POST,server,发送,xhr,ajax,result,post,response
From: https://blog.csdn.net/m0_74461206/article/details/142920947

相关文章

  • AJAX 和 fetch到底是什么
    文章目录1.**AJAX是什么?**示例:2.**fetch是什么?**示例:3.**区别和联系**4.**总结:**AJAX和fetch不是完全相同的东西,但它们有一些联系。它们都是用于在网页中实现异步请求的方式,但它们的实现方式和背景有所不同。1.AJAX是什么?AJAX(AsynchronousJavaScri......
  • 5.XSS-反射型(post)利用:获取cookie
    原理:文件路径:\pikachu\pkxss\xcookie\post.html将post.html文件,复制到皮卡丘的根路径下或者根下随意路径即可,并编辑文件需要修改以下两个地址,第一个地址是将原界面的样子链接过来,让用户认为是原界面,第二个是将cookie从数据库中提取出来的程序(注意和自己的目录相对应)基于域名配......
  • requests 模块 - post 请求
    1、post请求requests请求方法除了get请求方法外,还有其他方法,比如常用的post方法。post应用场景如下:(1)网页需要登录的情况。(2)需要给网页传输内容的情况。post用法和get用法一样,只是发送请求时需要加上data参数。2、代码示例importrequestsurl='https://fan......
  • 前端知识整理(全屏播放器 CSS JavaScript 轮转播放 jquery库 AJAX 画布 网页测试)
    currenttime在前端开发中,“currenttime”通常指的是获取用户设备的当前时间。这可以通过JavaScript来实现,下面是一个简单的示例代码,展示如何获取并显示当前时间:<!DOCTYPEhtml><html><head><title>显示当前时间</title></head><body><h1>当前时间:</h1><pid="d......
  • PostgreSQL学习笔记十二:灾难防范与数据恢复
    在PostgreSQL中可以采取以下方法进行灾难恢复:一、定期备份物理备份使用pg_dump进行逻辑备份,它可以将数据库以SQL文本的形式导出。例如:pg_dump-Uusernamedbname>backup.sql。可以使用工具将备份文件存储到远程位置,如网络存储或云存储。使用pg_basebackup进......
  • STM32与ESP32串口数据发送以及网页端数据实时显示和远程遥控
    目标:实现网页端速度实时显示以及可以通过点击页面按键达到对小车的位移方位控制。一、ESP32代码首先,需要让ESP32连接到WiFi,这样才能为后续的操作做准备。ssid="xxxxxx"password="xxxxxx"#WIFI连接defwifi_connect():wlan=network.WLAN(network.STA_IF)#STA模式......
  • 理解TON合约中的消息发送结构
    在开发TON合约时,消息的发送格式非常关键。特别是在使用TypeScript与TON合约交互时,我们会遇到这样的代码片段:asyncsend(provider:ContractProvider,via:Sender,args:{value:bigint,bounce?:boolean|null|undefined},message:string|Deploy){letbody:Ce......
  • 抖音直播间自动发送评论-唯一客服浏览器插件
    应用场景主流直播平台后台评论自动回复与循环发送话术某些客服平台网页端咨询消息自动回复功能介绍这是一个电脑端浏览器插件扩展,实现模拟人工收发消息,解放双手,摆脱重复工作利用浏览器多开,可以在一台电脑上运行多个浏览器,每个浏览器登录不同账号,同时运行插件。插件不限制直播或......
  • Spring Boot 集成 RabbitMQ 多个 Broker 发送、消费消息
    1.SpringBoot集成RabbitMQ多个Broker发送、消费消息1.1.版本说明1.2.概述1.3.RabbitMQ信息1.4.Spring配置1.5.定义常量1.6.定义配置属性1.7.定义两个ConnectionFactory1.8.定义两个RabbitTemplate1.9.定义两个SimpleRabbitListenerContainerFacto......
  • 第四十一章 发送方码率预估揭秘
    WebRTC使用的是GoogleCongestionControl(简称GCC)拥塞控制,目前有两种实现:旧的实现是接收方根据收到的音视频RTP报文,预估码率,并使用REMBRTCP报文反馈回发送方。*新的实现是在发送方根据接收方反馈的TransportFeedbackRTCP报文,预估码率。基于延迟的拥塞控制原理先来......