i want to get input value from html page and send them to flask then send back to html to show them my flask code is
from flask import request, make_response
from flask import jsonify
from flask import Flask
app = Flask(__name__)
@app.route('/hello', methods=['GET', 'POST'])
def hello():
message = request.get_json(force=True)
name = message['name']
response = {
'greeting': 'Hello, ' + name + '!'
}
return jsonify(response)
in my html code is
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta Access-Control-Allow-Origin="*" />
<meta charset="UTF-8">
<title>First Flask App</title>
<style>*{font-size:30px}</style>
</head>
<body>
<input id="name-input" type="text">
<button id="name-button">Submit</button>
<p id="greeting"></p>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#name-button").click(function(event){
let message = {
name: $("#name-input").val()
};
$.ajax({
url: 'http://localhost:5000/hello',
type: 'POST',
data:{'message': JSON.stringify(message)},
contentType: 'application/json; charset=utf-8',
success: function(response){
$("#greeting").text(response.greeting);
},
error: function(error){
alert(JSON.stringify(error));
}
});
});
</script>
</body>
</html>
i change html to jquery but alwasy see this error {"readyState":0,"status":0,"statusText":"error"} i search a lot in internet but none of the solution work for me