AJAX post请求

最新推荐文章于 2024-01-06 15:35:25 发布

芒果奶提

最新推荐文章于 2024-01-06 15:35:25 发布

阅读量334

点赞数

分类专栏：笔记文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_51196832/article/details/124758787

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.先创建server.js

2.创建post.html

server.js:

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

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

//3.创建路由规则
//request是对请求报文的封装
//response是对应响应报文的封装
app.post('/server', (request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO AJAX post');
});

//4.监听端口启动任务
app.listen(8000, ()=>{
    console.log("服务已经启动，8000 端口监听中......");
})

post.html:

<!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>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 () {
                //1.创建对象
                const xhr = new XMLHttpRequest();
                //2.初始化 设置请求类型与URL
                xhr.open("POST", "http://127.0.0.1:8000/server");
                //3.发送
                xhr.send("a=100&b=200&c=300");
                //4.事件绑定
                xhr.onreadystatechange = function () {
                    //判断
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            //处理服务端返回的结果
                            result.innerHTML = xhr.response;
                        }
                    }
                };
            });
        </script>
    </body>
</html>

浏览器效果：

芒果奶提

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX post请求

1.先创建server.js2.创建post.htmlserver.js://1.引入expressconst express = require('express');//2.创建应用对象const app = express();//3.创建路由规则//request是对请求报文的封装//response是对应响应报文的封装app.post('/server', (request,response)=>{ //设置响应头设置允许跨域 respon
复制链接

扫一扫