1.代码

1.1服务代码

//npm init --yes
//npm i express

//引入express
const express = require("express");

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

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

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

1.2前端代码

<!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>AJAX POST 请求</title>
    <style>
      #result {
    
    
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>
  </body>
  <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();
      //4.事件绑定 处理服务端返回的结果
      //onreadystatechange:每当xhr的readtstate发生改变的时候，调用该函数
      //xhr有五个值：0,1,2,3,4
      xhr.onreadystatechange = function () {
    
    
        //判断服务端是否返回了所有的响应结果
        if (xhr.readyState === 4) {
    
    
          //判断响应状态是否成功，2xx都是成功
          if (xhr.status >= 200 && xhr.status < 300) {
    
    
            //处理结果
            console.log(xhr.status); //状态码
            console.log(xhr.statusText); //状态字符串
            console.log(xhr.getAllResponseHeaders()); //所有响应头
            console.log(xhr.response); //响应体
            result.innerHTML = xhr.response;
          } else {
    
    
          }
        }
      };
    });
  </script>
</html>

2.代码讲解

2.1使用express创建服务的代码讲解

app.post("/server", (request, response) => {
    
    
  response.setHeader('Access-Control-Allow-Origin','*');
  response.send("HELLO EXPRESS");
});

如果是接收post请求，则需要将app的get方法换成post方法

2.2前端代码讲解

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=1&b=2");
  //4.事件绑定 处理服务端返回的结果
  //onreadystatechange:每当xhr的readtstate发生改变的
  //xhr有五个值：0,1,2,3,4
  xhr.onreadystatechange = function () {
    
    
    //判断服务端是否返回了所有的响应结果
    if (xhr.readyState === 4) {
    
    
      //判断响应状态是否成功，2xx都是成功
      if (xhr.status >= 200 && xhr.status < 300) {
    
    
        //处理结果
        console.log(xhr.status); //状态码
        console.log(xhr.statusText); //状态字符串
        console.log(xhr.getAllResponseHeaders()); //
        console.log(xhr.response); //响应体
        result.innerHTML = xhr.response;
      } else {
    
    
      }
    }
  };
});

xhr.open("POST", "http://127.0.0.1:8000/server");

XMLHttpRequest的open方法，第一个参数为POST，则发送post请求，为GET则发送get请求
结点的addEventListener方法可以给结点添加监听函数，方法的第一个参数是触发的事件，第二个参数是自定义的一个函数

xhr.send("a=1&b=2");

post请求的请求参数放在send方法中

3.运行结果

在这里插入图片描述

ajax——通过express框架发送ajax Post请求

1.代码

1.1服务代码

1.2前端代码

2.代码讲解

2.1使用express创建服务的代码讲解

2.2前端代码讲解

3.运行结果

猜你喜欢