Ci-dessous, nous examinerons 6 éléments. J'envoie à partir d'un fichier HTML. L'envoi et la réception se font localement. Si vous l'essayez sur le serveur, veuillez lire le domaine comme il convient.
Affichez-le dans votre navigateur et exécutez
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="id" id="body">
<button id="click">Send</button>
<script>
document.querySelector("#click").addEventListener("click",function(){
let data = document.querySelector("#body").value;
//Get
const params = new URLSearchParams();
params.set("id",data);
fetch("http://localhost:5000/get" + "?" + params.toString())
.then((res)=>{
if(!res.ok){
throw new Error();
}
return res.json();
})
.then((res)=>{
console.log(res)
})
.catch((res)=>{
console.log(`Error Response : ${res}`);
})
//Post
const body = {
id: data
};
fetch("http://localhost:5000/post",{
method: "POST",
headers: {
'Content-Type' : "application/json"
},
body: JSON.stringify(body)
})
.then((res)=>{
if(!res.ok){
throw new Error();
}
return res.json();
})
.then((res)=>{
console.log(res)
})
.catch((res)=>{
console.log(`Error Response : ${res}`);
})
})
</script>
</body>
</html>
# -*- encoding:utf-8 -*-
import os
import sys
import json
from flask import Flask, render_template, request
from logging import getLogger, StreamHandler, DEBUG, INFO, WARNING, ERROR, CRITICAL
app = Flask(__name__)
#Paramètres du journal
logger = getLogger(__name__)
handler = StreamHandler()
handler.setLevel(DEBUG)
logger.setLevel(os.getenv("LogLevel", DEBUG))
logger.addHandler(handler)
logger.propagate = False
#Activer CORS
@app.after_request
def after_request(response):
logger.debug(f"\033[33m{sys._getframe().f_code.co_name} function called\033[0m")
response.headers.add('Access-Control-Allow-Origin', '*')
response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
return response
#Obtenir le paramètre Obtenir
@app.route('/get')
def get():
#Vérification des arguments
if "id" not in request.args:
logger.warning("id Parameter is not send")
return json.dumps({"message": "send message"})
ID = request.args.get('id')
logger.info(f"ID = {ID}")
return json.dumps({"Get message": ID})
#Obtenir le corps du message
@app.route('/post',methods=["POST"])
def post():
logger.info(f"request.data={request.data}")
data = request.get_json()
logger.debug(f"data = {data}")
logger.debug(f"type(data) = {type(data)}")
#application/Si vous le recevez au format json, vous pouvez également le recevoir comme suit
logger.debug(f"request.json = {request.json}")
logger.debug(f"type(request.json) = {type(request.json)}")
#Vérification des arguments
if "id" not in request.json:
logger.warning("id Parameter is not send")
return json.dumps({"message": "send message"})
ID = request.json["id"]
logger.info(f"ID = {ID}")
return json.dumps({"Post message": ID})
if __name__ == "__main__":
app.run(host='0.0.0.0',port=5000)
*** Si la version Express est 4.16 ou ultérieure, l'analyseur de corps n'est pas requis et ne peut être implémenté qu'avec express ***
const express = require('express');
const app = express()
/**
* Express 4.Après 16 corps-express implémenté basé sur un analyseur.json()
*Vous pouvez obtenir le corps POST avec.
*Par conséquent, demandez comme suit.Il n'y a pas besoin de faire un corps.
*
* const bodyParser = require('body-parser');
* app.use(bodyParser.urlencoded({ extended: false }));
*/
app.use(express.json()); //Content-Le type est l'application/Besoin de ceci si envoyé en tant que json
app.use(express.urlencoded({ extended: true }));
//Activer CORS
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
//Obtenir le paramètre Obtenir
app.get('/get', (req, res) => {
let response = "";
console.log(req.query);
console.log(typeof req.query);
if(req.query.hasOwnProperty("id")){
response = req.query.id
}
res.json({"Get Parameter" : response});
})
//Obtenir le corps du message
app.post('/post', (req, res) => {
let response = "";
console.log(req.body);
console.log(typeof req.body);
if(req.body.hasOwnProperty("id")){
response = req.body.id
}
res.json({"Post Body" : response});
})
//Ecrivez une fonction de rappel à exécuter immédiatement après le début de l'écoute dans le deuxième argument d'écoute.
app.listen(5000)