Ajax-07:Ajax发送POST请求

简介: Ajax-07:Ajax发送POST请求

需求描述

当鼠标移动到div上的时候,向服务器发送请求,然后把服务器返回的结果显示到div上

客户端网页

image.png

客户端代码

<h2>需求:当鼠标移动到div上的时候,向服务器发送请求,然后把服务器返回的结果显示到div上</h2>
<div class="result"></div>
<script>
    const result = document.querySelector('.result');
    result.addEventListener('mouseover',function() {
        // 1. 创建xhr对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化,设置请求方式和URL
        xhr.open('POST',"http://localhost:8000/server");
        // 3. 发送
        xhr.send();
        // 4. 事件绑定,处理服务器返回的结果
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                if(xhr.status >= 200 && xhr.status < 300) {
                    result.innerHTML = xhr.response;
                }
            }
        }
    });

服务器端代码

由于是POST请求,需要添加路由,才能防止跨域问题的出现。

image.png

实现效果

image.png

POST设置请求体

image.png

相关文章
|
4月前
|
XML JSON 前端开发
深入了解JavaScript中的AJAX和HTTP请求
深入了解JavaScript中的AJAX和HTTP请求
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
2月前
|
XML 前端开发 JavaScript
AJAX get() 和 post() 方法
AJAX(Asynchronous JavaScript and XML)是一种用于创建快速和动态网页的技术,它允许使用 JavaScript 和 XMLHttpRequest 对象在不重新加载整个页面的情况下向服务器发送请求和接收响应。jQuery 提供了几个用于 AJAX 操作的方法,包括 .ajax()、.get() 和 .post()
14 1
|
3月前
|
XML JSON 前端开发
|
3月前
|
前端开发 JavaScript
|
3月前
|
前端开发 JavaScript Python
Django 模板中使用 Ajax POST
Django 模板中使用 Ajax POST
17 0
|
3月前
|
JSON 前端开发 安全
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
37 0
|
3月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
29 0
|
3月前
|
XML 前端开发 JavaScript
AJAX如何向服务器发送请求?
AJAX如何向服务器发送请求?
44 0
|
4月前
|
JSON 前端开发 JavaScript
Django实践-04静态资源和Ajax请求
Django实践-04静态资源和Ajax请求
Django实践-04静态资源和Ajax请求