I would like to be able to run python code in my javascript. How do I do this?
This is my attempt, but it's not working and I don't know why
The two following files, I have in the same directory if that matters?
Please help, thanks
scripts.js:
function postPyScript(input){
var jqXHR = $.ajax({
type: "POST",
url: "/app.py",
data: { mydata: input }
});
return jqXHR.responseText;
}
$('#generateBtn').click(function(){
datatosend = 'this is my matrix';
result = postPyScript(datatosend);
alert('Got back ' + result);
});
app.py:
from flask import *
app = Flask(__name__)
#app.route("/app.py", methods=['GET', 'POST'])
def someFunction():
message = None
if(request.method=='POST'):
datafromjs = request.form['mydata']
result = "something to return"
resp = make_response('{"response": '+result+'}')
resp.headers['Content-Type'] = "application/json"
return respreturn
return render_template('index.html',message='')
if __name__ == '__main__':
app.run(debug=True)
Because you only have one route in flask, it seems that you are likely already using a server to serve your html and javascript - maybe you are using the apache instance that your computer came with? In addition to that, you need to be running your flask server. Your flask server will be running on a different port from your apache (or whatever) server.
So, two things:
run your flask server. you might do something like:
$ cd directory-of-this-project
$ export FLASK_APP=app.py
$ flask run
change the ajax url to include the port of the flask server (e.g. http://127.0.0.1:5000/app.py)
Related
I'm studying Flask, I have a server on register.it that I use for my experiments. I created a phyton file with the classical Hello world! (the original code was more complicated but I've tried to reduce it to find the error), and a frontend page that requests the string using jquery POST.
Everything seems to work fine, no errors, neither if I run the code directly from the terminal. But instead of printing Hello world! the response is always:
It works!
Python 3.7.8
Have you an idea of what I'm doing wrong?
Thank you
Of course, sorry :)
This is in a file called REST.py in the folder ./REST/
from flask import Flask
app = Flask(__name__)
#app.route("/")
def home():
return "Hello, World!"
if __name__ == "__main__":
app.run(debug=True)
And this one is the function in the front end file, in the folder ./
function search(qry, inc){
data = {};
data.qry = qry;
data.inc = inc;
$.post(
'./REST/',
data,
function(ret){
try {
alert(ret);
//_results_list = JSON.parse(ret);
//UI_searchresults(_results_list);
}
catch (e){
alert(`C'é stato un errore di comunicazione con il server, ti invitiamo a provare piú tardi o a contattare l'assistenza`);
}
});
}
I thought this should print the response, and it works but the response is always "It works! Python 3.7.8" instead of the string/json that I'd like to send. The code now is very easy so I don't have ideas about the possible problems.
I have my ionic app where I'd like to run my python code as a rest API, I used to do it with php but since python has many libraries available, it will be useful for many projects to exexute python code in server side instead of php.
I have manage my python code with flash with a simple Hello World code, and I can run it, so if I run python3 test.py (which is the name of my exemple code), inside my browser, if I go to http://localhost:5002 I have my result {"text": "Hello World!"}
from flask import Flask, request
from flask_cors import CORS, cross_origin
from flask_restful import Resource, Api
from json import dumps
from flask_jsonpify import jsonify
app = Flask(__name__)
api = Api(app)
CORS(app)
#app.route("/")
def hello():
return jsonify({'text':'Hello World!'})
if __name__ == '__main__':
app.run(port=5002)
Then, if I leave my console execute my python code and than in my ionic app I call my server :
export class Tab3Page implements OnInit {
constructor(private http: HttpClient) {
}
ngOnInit() {
var obj: JSON;
let headers = new HttpHeaders({'Content-Type': 'application/json; charset=UTF-8'});
let options = {headers:headers};
this.http.get('http://127.0.0.1:5002/').subscribe(data => {
console.log(data);
})
}
}
I am able to console log the same result, which is great.
What I'd like to do now, it to execute my python code from my ionic code without the python code running in the console.
This will be the need in the futur, since my code will be in server side, and then I need to open (call it) only when I need to execute something (like mysql request for example).
This is what i used to do it php :
this.http.get(this.server + `getUser.php?&id=${userId}`);
This question already has an answer here:
Error when check request.method in flask
(1 answer)
Closed 4 years ago.
I am attempting to route my Flask routes and see the correct return from Flask (the returns indicated in my code below). When I direct my page to mypage.com/, I do see the output, but it seems to be returning the xxamp apache index page in my console when I am expecting to see "hello world".
here is my directory listing:
/localhost
/my_dir
/js
/templates
app.py
Here is my AJAX call to /:
js:
$(function(){
$('button').click(function(){
var user = "user";
$.ajax({
url: '/',
data: user,
type: 'POST',
success: function(response){
console.log(response);
},
error: function(error){
console.log(error);
}
});
});
});
And here is my Flask:
app.py:
from flask import Flask, request, send_file, render_template, json
from ftplib import FTP
app = Flask(__name__)
#app.route('/')
def hello_world():
return 'hello world!'
if __name__ == "__main__":
app.run()
There seems to be a disconnect here. I believe my Apache is running on 80 where Flask is listening on 5000. So my javascript AJAX call is actually making a call to port 80 instead of 5000, hence, why I think I am seeing a different return than expected. Do I have to specify the port in my AJAX call, or should I have flask listen on port 80?
Try to add POST with acceptable method
#app.route('/index', methods=['GET', 'POST'])
def index():
return render_template('index.html')
I'm having a hard time integrating create-react-app single page application to my flask backend. I want to be able to make a fetch/axios call from my front end like so: axios.get('/getResults') and fetch('/getResults'). Some things I have tried but not limited to is specifying the Flask port as 3000 which is the same used by create-react-app. Also, used the proxy configuration feature on the "package.json" file of create-react-app but to no avail. I suspect my folder structure and Flask code implementation may likely be causing this. Below is my folder structure and "app.py" code. Any help I could get will be appreciated. I can provide additional information if necessary. Thanks
Project -build(contains static folder, index.html...Other meta files)-node_modules-public-srcapp.pypackage.jsonrequirements.txt
app.py:
from flask import Flask, Response, request, jsonify, make_response, send_from_directory,render_template
app = Flask(__name__, static_path='/build/static/')
app.debug=True
#app.route('/')
def root():
print('Inside root function')
return app.send_static_file('index.html')
#app.route('/getResults', methods=["GET"])
def results():
print('Inside getResults path')
return app.send_static_file('index.html')
#app.route('/postData', methods=["POST"])
def data_results():
print('Inside postData path')
data = request.get_json
return jsonify(data)
#app.route('/<path:path>')
def send_js(path):
print("inside send_js fxn")
return send_from_directory('./build/static',path)
if __name__ == "__main__":
print("inside main host call")
app.run(host='0.0.0.0', port=3000)
Errors I get when I run "python app.py" are:
On the terminal: Inside root function
127.0.0.1 - - [12/Jun/2017 09:42:24] "GET / HTTP/1.1" 404 -
On the browser:Not Found - The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.
I was having the exact same issue and I was able to solve it by appeasing Flask with symlinks.
Keep the templates and static directory paths at their defaults and in the directory with your Flask main file, add these symlinks
ln -s build/ templates
ln -s build/static static
In case you were curious, this was my specific problem, which just involved a few more nested directories but was in essence the same:
Running NPM Build from Flask
You can then use Nurzhan's root configuration:
#app.route('/')
def root():
print('Inside root function')
return render_template('index.html')
But you only require your app declaration to be: app = Flask(__name__)
The only thing that doesn't work for me is the favicon, and I will update this answer once I figure that out.
In development mode, you need to configure your create-react-app package.json to forward "ajax" request to the flask server.
Here is what my package.json looks like:
{
"name": "socialite",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8080",
"devDependencies": {
"react-scripts": "1.0.10"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
See the proxy field? That's where the magic happens, replace its value with the flask server address. That way, you can take advantage of CRA hot reloading feature. This is documented at in create-react-app as "Proxying API Requests in Development"
Then do run your application, you go at localhost:3000 or whatever port yarn opens for you. And when you do an API call in javascript over the rainbow to the server for instance: fetch('/api/model/') or something nodejs' server will forward to the flask app. I think the nodejs server does look at the content-type field of the ajax request to know whether it should forward the request to the backend server or not.
I recommend you prefix all your backend routes with something like /api/v1/ or something so the nginx configuration is neat and easy to write.
I think you have a number of misunderstandings.
The create-react-app runs on its own server on port 3000 and if you try to run your flask app on the same port on the same machine it will complain that port 3000 is already in use. So from this we move to another question - the structure of your application.
Will it be a separate reactjs based client on the frontend and api based on flask in the backend which will be 2 separate applications communicating with each other over HTTP? In this case the frontend and backend will usually run on separate servers.
Or it will one flask application which will use reactjs in its template pages?
You can fix your current problem with not finding URL by changing to this in your code:
#app.route('/')
def root():
print('Inside root function')
return render_template('index.html')
And this:
template_dir = os.path.abspath('build/templates')
app = Flask(__name__, static_path='/build/static/',
template_folder=template_dir)
Since your templates folder is in the build directory.
I'm trying to execute this little request with jquery on a page load:
$.ajax({
type: "GET",
url: "/static/query.py",
cache: false,
success: function (data) {
$(body).text(data);
}
});
On a server running nginx, python, in a virtualenv, working with Flask framework and the return is the query.py sourcecode, not the data retrieved from the DB.
query.py is marked as executable and the script has the shebang:
#!/home/gabriel/project/bin
which points to the bin in my virtualenv. I think got the basis covered but yet, the problem persists.
Tips?
More info:
Flask script:
from flask import Flask, render_template
application = Flask(__name__)
#application.route('/')
def init():
return render_template('index.html')
if __name__ == "__main__":
application.run(host='0.0.0.0', debug=True)
uwsgi.py to load the Flask script:
from myapp import application
if __name__ == "__main__":
application.run()
The query.py:
from db import * //Database model, SQLAlchemy.
def something():
data = Kingdom.query.all()
return data
something()
You should be running the actual code that's in query.py inside flask. Do something like:
#application.route("/query"):
def get_data():
.. whatever code you need; currently in query.py, you would probably use sqlalchemy/ flask-sqlalchemy
data = your data (dictionary? list?)
return jsonify(data=data) # flask will turn your data into a proper JSON string to send back as a response to the ajax call.
Don't forget to import jsonify from flask, consult docs here.
Also rename "/static/query.py" to "/query" in example above, or anything else you see fit. You can also send flask parameters via the AJAX call to process in your query; e.g., filtering parameters. Focus the question for further guidance.