ajax中POST請求與引數(請求體)設定

2021春節晚會發表於2020-12-31

1.建立在testthree資料夾並在這個資料夾裡面
2.建立post.html檔案
3.建立server.js檔案

本篇文章使用了當滑鼠移動至方框內則傳送請求示例

post.html檔案

<!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>
</head>
<body>
    <!-- id為result的div -->
    <div id="result" style="width:  200px;height: 100px;border: solid 1px #770088;">
        滑鼠經過向伺服器傳送post請求，並把結果返回，展示在本div內
    </div>
    <script>
        // 獲取元素
        const btn = document.getElementsByTagName('result');
        // 把獲取到的響應體展示在div中
        const result = document.getElementById("result");
        // 2.繫結事件 
        // result.addEventListener('mouseover', function(){console.log('test');});
        result.addEventListener('mouseover', function(){
            // 0.測試列印
            console.log('test');
            // 1.建立物件
            const textone = new XMLHttpRequest();
            // 2.初始化，設定請求型別與URL
            // 第一個引數為[請求型別]
            // 第二個引數為[給那個url傳送]
            textone.open('POST','http://127.0.0.1:8000/server');
            // 3.傳送 POST引數
            // 沒有引數是直接——textone.send();
            // 當有引數時，就直接寫在這裡面
            // 格式1:textone.send("a=100&b=200&c=300");
            // 格式2:textone.send("a:100&b:200&c:300")
            // 任意格式都可以的            但前提是服務端   設定好了接收的處理的方式
            textone.send("新年的第一個紅包使我送給你的");
            // 4.事件繫結 處理服務端返回的結果
            textone.onreadystatechange = function(){
                // 判斷 (服務端返回了所有的結果) 4
                if(textone.readyState === 4){
                    // 再次判斷——響應狀態碼  
                    if(textone.status >= 200 && textone.status < 300){
                        // 處理服務端返回的結果
                        result.innerHTML = textone.response;
                    }else{}
                }
            }
        });
    </script>
</body>
</html>

server.js檔案

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

// 2.建立物件
const app = express();

// 3.建立路由規則  裡面的形參 request與response   (自己可以隨便定義名字的)
//  建議寫成  request與response  因為可以見名思意，方便自己看
// request  對請求報文的封裝
// responst 對響應報文的封裝
//  請求路徑為'/server'
app.post('/server', (request, response)=>{
    // 設定響應頭 設定允許跨域
    // 頭名字為Access-Control-Allow-Origin
    // 頭的值為
    response.setHeader('Access-Control-Allow-Origin','*');
    // 設定響應體
    response.send('POST請求成功,路由設定為server,響應體為本段文字');

});

// 4. 監聽埠啟動服務
// 這裡listen(8000)後面新增了一個回撥，用來提示，告訴自己是否監聽成功
app.listen(8000, ()=>{
    console.log("服務已經啟動，8000埠監聽中......");
});

啟動服務
請求返回圖
在這裡插入圖片描述引數顯示位置
在這裡插入圖片描述在這裡插入圖片描述

相關文章