I am creating a very simple dashboard for automating a task.
Security is not a concern here because I am only local hosting.
JQuery Code
$.post("/approve", data={"title":title,"content":content}, success=function(){
window.location.reload(true)
});
Flask Code
#app.post('/approve')
def approve_topic():
args = request.args
print(args)
json.dump(args, open("topics/"+uuid4().hex+".json", "w"))
return {"status":"clear"}
Result (the JSON file)
{}
Expected Result
{"title":"whatever the title is", "content":"whatever the content is"}
Any idea why this is happening?
The first time I ran this it worked just fine, but now no matter what I reset or what I do it won't work.
I just tested the code, it is working fine with request.form.
Flask Code:
from flask import Flask, request
app = Flask(__name__)
# you can ignore this function as you're doing request on same origin
#app.after_request
def allow_cors_origin(response):
"""Resolve CORS error"""
response.headers.add("Access-Control-Allow-Origin", "*")
response.headers.add("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS")
return response
#app.route("/echo", methods=["POST"])
def echo():
data = request.form
print(data) # Output: ImmutableMultiDict([('a', '1')])
return data
app.run(debug=True)
jQuery Code:
$.post("http://localhost:5000/echo", {a: 1}, r=>console.log("response: ", r))
// Output: response: {a: '1'}
Related
I have written a simple todo app with react acting as a frontend and flask handling CRUD from a DB. The app is using axios to handle the requests; GET completes fine however when attempting to POST JSON the flask api returns a 400 error. Here's some condensed sample code.
JS POST function.
function testPost(){
axios.post('http://'+window.location.hostname+':8000/todo/', {
title: "test123",
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
Serverside
class Todo(Resource):
def post(self): # create a new todo
conn = pool.getconn()
cur = conn.cursor()
app.logger.info(request.form['title'])
cur.execute("INSERT INTO todo (task, done) VALUES (%s, %s)", (request.form['title'], False))
conn.commit()
app.logger.error(e)
cur.close()
pool.putconn(conn)
Other methods not shown
Then the rest of the server code attaching the resource to the api and the CORS setup (not shown in file order)
app = Flask(__name__)
CORS(app, methods=['POST','GET','PUT','DELETE'])
api = Api(app)
api.add_resource(Todo, '/todo/')
app.run(debug = True, host='0.0.0.0', port=port)
Tests
Using python to test the api works fine, running this in a seperate python file will add to the DB.
response = requests.post(URL + "todo/", data={"title": f"test{randint(1, 100)}"})
My best guess is that axios is not adding the data to the request in a way that the backend is unable to process. Before using axios I tried to make the request with XMLHttprequest however this presented the same problem. I swapped to axios on the recommendation of someone else, given its alleged improved simplicity.
request.form['key'] and request.get_json()['key'] are completely different fields python requests in the way I used it posts to the former and js posts to the latter. Modifying the function to use whichever is available fixes this.
i am trying to create a social media page where in home page of every user they can see feeds,
feeds from friend's post. when ever my friend create a post i can see the same in my feeds in real time.
For that i am using SSE in python flask. everything working find but after adding few more users only i realise all the post are coming to all logged in people's feed. which wrong, i want to see feeds from only my friends.
Can any one help me how to achieve it. i am sharing the base level code of python and java script.
Client side:
var source = new EventSource("http://172.19.0.3:8044/events");
source.addEventListener('user_feeds', function(event) {
var data = JSON.parse(event.data);
console.log("Even from server ");
console.log(data);
}, false);
Server side
from flask_cors import CORS
from flask_sse import sse
from factory import create_app
app = create_app()
CORS(app)
app.config["REDIS_URL"] = "redis://redis"
input_user_feeds = dict()
app.register_blueprint(sse, url_prefix='/events)
PROMOTION_BLUEPRINT = Blueprint('my_page', __name__, url_prefix='/api/v1/')
#PROMOTION_BLUEPRINT.route('/feeds/<user_id>', methods=["GET"])
def feeds(user_id):
push_feeds(user_id)
return "SUCCESS"
#PROMOTION_BLUEPRINT.route('/user_request/<user_id>', methods=["POST"])
def user_request(user_id):
data = request.json
add_feeds(user_id, data)
return "SUCESS"
def push_feeds(user_id):
while 1 == 1:
if user_id in input_user_feeds:
input_request = input_user_feeds[user_id]
sse.publish(input_request, type='user_feeds')
del input_user_feeds[user_id]
def add_feeds(user_id, data):
input_user_feeds[user_id] = data
if __name__ == '__main__':
app.run(host='0.0.0.0', port=Config.PORT, debug=True)
I trued to do with single user id. but that is also not a good idea.
It will be helpful if anyone having good knowledge in SSE help me find the solution.
Thanks in advance.
I'm a new with flask and now I need to makes my page dynamic.
That's why I'm trying to send data from JS to Python using the JSON format with AJAX but surfing the web I can't understand how to do it.
Can anyone show me a simple implementation of how AJAX is used on Flask to change the value of a variable every X time?
This my flask app:
from flask import Flask, render_template, request, redirect, url_for, session, flash, jsonify, make_response
app = Flask(__name__)
#app.route("/getdata", methods = ['POST', 'GET'])
def getdata():
#get JSON data and change it
return data
#app.route("/data")
def data():
# show dynamically the data
return render_template("data.html")
if __name__ == "__main__":
app.run(debug=True, port=5000)
This is my js function, the gauge array is the value to make dynamic
setInterval(
ciccio.refreshValue({{gauge[0]}})
,wrapper.refreshValue({{gauge[1]}})
,wrapper1.refreshValue({{gauge[2]}})
,wrapper2.refreshValue({{gauge[3]}})
,wrapper3.refreshValue({{gauge[4]}})
,wrapper4.refreshValue({{gauge[5]}})
,wrapper5.refreshValue({{gauge[6]}})
,wrapper6.refreshValue({{gauge[7]}})
,500);
)
I need to refresh the gauge array
I have resolved by this code
python:
def getdata():
return jsonify({'results' : sample(range(101), 2)}) # some data from the server
#app.route("/misuratore")
def data():
return render_template("misuratore.html")
javascript
setInterval(
function updateGauge() {
var updatedData = $.get('/getdata'); //get data from localhost/getdata
updatedData.done(function(results) { // when the get are completed launch function that apply the new value
pippo.refreshValue(results.results[0])
pluto.refreshValue(results.results[1])
});
},1000); // every second
I created a flask api connecting to my mongodb database.
My initial part of the code looks like:
app = Flask(__name__)
cors = CORS(app, resources={
r"/api/v1/*": {"origin": "*"},
})
client = MongoClient(connection_str)
db = client.get_database(db_name)
#app.route("/api/v1/players", methods = ['GET'])
def get_all_players():
....
This works as I intended when I use Postman, but when I input directly into the browser (localhost:5000/api/v1/players), it shows me an error as follows:
I think this is the reason why my fetch doesn't work.
Any thoughts?
It's the problem with SSL certificate. All you need to do, is add ssl_context='adhoc' to your app.run() call.
An example :
from flask import Flask
app = Flask(__name__)
#app.route("/")
def hello():
return "Hello"
if __name__ == "__main__":
app.run(ssl_context='adhoc')
also you need to install pyopenssl in your virtual environment
So I have set up app.py, index.js, index.html in appropriate folder as flask suggests. Index.html gets rendered as when app.py runs then index.html runs index.js which grabs input data from user. I am trying to send this input and send it to python where I can call an API, grab data, and work with it however I cannot think of a way to do this.
my app.py:
import os
from flask import Flask, render_template, jsonify, request, redirect
app = Flask(__name__)
# This will run upon entrance
#app.route("/")
def home():
return render_template("index.html")
#app.route("/stock_data")
def get_stock_data():
# called from index.js Plot function
if __name__ == "__main__":
app.run()
and here is my javascript code:
console.log("everythin works fine.")
d3.select("#stocklabelsubmit").on("click", submitted)
function submitted(){
d3.event.preventDefault();
// grab label inputted.
var inputted_label = d3.select("#stockInput").node().value;
d3.select("#stockInput").node().value = "";
Plot(inputted_label);
};
function Plot(input){
var url = "full url"
// when this function is called call /stock_data function!!
// data is what is returned from python
d3.json(url).then(function(data){
})
}
Everything works fine, when I console log inputted_label at the end of function submitted it works. Now I want to send inputted_label variable to /stock_data. Thanks in advance!
var url = "/stock_data"
This needs to be a valid URL, not just the path to the Flask endpoint. That means it must start with "http://" or "https://" and include a domain. For development purposes, "http://localhost/stock_data" will work. If you ever deploy this to a server, you will want to create a configuration file so that the host name can be configured depending on what environment you are running in.