Я создал простой Flask-сервер, который добавляет информацию о персонале в список, полученный от клиентской стороны.
Вот app.py, который содержит Python-сервер флакона:
import os
import uuid
from flask import Flask, jsonify, request
from flask_cors import CORS
# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)
# enable CORS
CORS(app)
#static list containing persons
persons = []
#test check route
@app.route('/status', methods=['GET'])
def status():
return jsonify(dict({ 'message': 'Hello world'}))
@app.route('/person', methods=['POST'])
def add_person():
post_data = request.get_json()
response_object = dict({
'id': uuid.uuid4().hex,
'name': post_data.get('name'),
'age': post_data.get('name')
})
persons.append(response_object)
return jsonify(response_object), 201
@app.route('/person', methods=['GET'])
def get_persons():
return jsonify(persons), 200
@app.route('/person/<person_id>', methods=['GET'])
def get_person(person_id):
person = list(filter(lambda x: x['id'] == person_id, persons))
return jsonify(person), 200
if __name__ == '__main__':
app.run(debug=True)
Сохраните сценарий и запустите его, используя:
python app.py
Это образец формы, который будетотправьте поля имени и возраста в API фляги:
// Write the following in index.js
window.onload = () => {
document.querySelector('#btnSubmit').addEventListener('click', function(event) {
const pName = document.querySelector('#pName').value;
const pAge = document.querySelector('#pAge').value;
if (!pName || !pAge) {
alert('Please enter all fields to continue!');
return;
}
const objectToSend = {
name: pName,
age: pAge
};
fetch('http://localhost:5000/person', {
method: 'POST',
mode: 'cors',
body: JSON.stringify(objectToSend)
headers: new Headers({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
})
})
.then(function(response) {
return response.json()
})
.then(function(data) {
console.log(data);
})
.catch(function(err) {
console.err(err);
});
});
}
<!DOCTYPE HTML>
<HTML>
<!-- <script src="index.js"> -->
<BODY>
<FORM name="myform">
<label>Name: <input id="pName" type="text" placeholder="Enter name"></label>
<label>Age: <input type="number" id="pAge" placeholder="Enter age"></label>
<input type="button" id="btnSubmit" value="Submit">
</FORM>
</BODY>
</HTML>
Надеюсь, что это даст вам преимущество!
Рекомендуемое чтение:
JS Fetch API