AJAX发送POST请求

需求：
当鼠标移入到页面div当中，页面向服务端发送POST请求，服务端将响应结果作为显示体在div中显现出来

前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</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>

服务端

// 引入express
const express=require('express');// 创建应用对象
const app=express();// 创建POST路由规则
app.post('/server',(request,response)=>{// 设置响应// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 响应体response.send('HELLO AJAX POST');
});
// 监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动...");
})

结果

查看相应的响应头响应体请求头

POST设置请求体

在POST参数的设置是在send()方法中进行设置的

            xhr.send('a=100&b=200&c=300');xhr.send('a:200&c:300&b:500');xhr.send('123123123');

参数的格式可以是任意格式

POST设置请求头信息

            // 设置请求头// Content-Type是来设置 请求体 内容类型 即 xhr.send() 内的类型// 后边一长串代表的是 send() 括号里面参数类型查询的固定写法xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');// 发送xhr.send('a=100&b=200&c=300');

响应结果

AJAX发送POST请求相关推荐

$.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
一.使用Ajax发送get请求发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...
Django中ajax发送post请求，报403错误CSRF验证失败解决办法
今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显 ...
ajax发送异步请求与ajax发送同步请求
async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. ajax发 ...
原生php ajax post_使用原生ajax发送post请求完整案例
搜索热词使用ajax发送数据实现前后台的交互,我想是web开发最基础的技能了.近来dz开发因为不兼容jquery,所以只能使用原生js发送数据,不想还遇到很多问题.在这里分析总结一下.先来一个使用a ...
原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
使用Ajax发送http请求（getpost请求）
目录同步和异步同步和异步的概念异步更新网站 Ajax Ajax 的概念发送 Ajax 请求的五个步骤 Ajax 请求:get 请求举例 Ajax 请求:post 请求举例 XMLHttpReq ...
Ajax：ajax发送Post请求、ajax案例
目录: (1)ajax发送Post请求 (2)ajax发送post请求模拟提交表单数据 (3)ajax案例验证用户名是否可用 (4)发送ajax请求动态展示学生列表案例 (1)ajax发送Post请求 ...
python token post403原因_Django中ajax发送post请求报403错误CSRF验证失败解决方案
前言今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了 ...
ajax的post请求出现403错误,如何解决Django中ajax发送post请求报403错误CSRF验证失败的问题...
如何解决Django中ajax发送post请求报403错误CSRF验证失败的问题发布时间:2021-02-05 14:23:57 来源:亿速云阅读:92 作者:小新这篇文章主要介绍了如何解决Dj ...

AJAX发送POST请求

AJAX发送POST请求

前端代码

服务端

POST设置请求体

POST设置请求头信息

AJAX发送POST请求相关推荐

最新文章

热门文章