AJAX基本操作(二)——post請求以及設定請求頭資訊

阿新 • • 發佈：2021-02-04

文章目錄

- - post請求:
  - 設定請求頭資訊

post請求:

後端程式碼:

//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.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
});
app.all('/server', (request, response)=>{
    //設定響應
    response.setHeader('Access-Control-Allow-Origin', '*');
     //響應頭
     response.setHeader('Access-Control-Allow-Headers', '*' 
);
    response.send('HELLO AJAX POST');
});
//4. 監聽埠啟動服務
app.listen(8000, ()=>{
    console.log("服務已經啟動, 8000 埠監聽中....");
});

這裡補充一個知識點：如何在post請求中新增引數：
在傳送的步驟中寫成如下的形式：
send函式中寫上需要新增的引數即可。

   xhr.send('a==100&b=100&c=100')

設定請求頭資訊

前端程式碼：

  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded' 
);//設定請求體型別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result=document.getElementById('result')
        result.addEventListener('mouseover',function(){
            //建立物件
           const xhr=new XMLHttpRequest()
           //初始化和設定url
           xhr.open('POST','http://127.0.0.1:8000/server')
           //設定請求頭
           xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//設定請求體型別
           //傳送
        //    xhr.send()
           xhr.send('a==100&b=100&c=100')
           xhr.onreadystatechange=function(){
               if(xhr.readyState==4){
                   if(xhr.status>=200 && xhr.status<=300){
                       //處理服務端返回的資訊
                       result.innerHTML=xhr.response
                   }
               }
           }
        })
    </script>
</body>
</html>

若在後端出現報錯是因為我們還會發送一個option請求，
而我們無法識別option請求。
在這裡插入圖片描述

可將後端程式碼的post改為all 使得可以接受任意的請求

app.post('/server', (request, response)=>{
    //設定響應
    response.setHeader('Access-Control-Allow-Origin', '*');
     //響應頭
     response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
});

AJAX基本操作(二)——post請求以及設定請求頭資訊

技術標籤：AJAXajaxhttpjs 文章目錄 post請求:設定請求頭資訊 post請求: 後端程式碼: //1. 引入express

Python+selenium基本操作二

from selenium import webdriver#引入driver=webdriver.Chrome()#用谷歌瀏覽器driver.get(\"https://www.baidu.com/\")#開啟百度driver.find_element_by_css_selector(\"[class=\'s_ipt\']\").send_keys(\"nihao\")#