Ajax: Unable to send Json object to bottle webservice - python

I am trying to understand how the Ajax call works.
I am sending a Json object to a bottle python webservice as an URL.
$.ajax({
type: "POST",
data: {"jstring": JSON.stringify(output)},
url: "http://localhost:8080/salesvolume" ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
$('#container').highcharts(data);
},
error: function() {
alert("Something is not OK")
},
});
The above snippet is my Ajax Call. output is the Json object that I intend to send to the server.
#app.post('/salesvolume')
def salesvolume(db):
jsonstring = request.forms.get('jstring')
_jsonparams = json.loads(jsonstring)
_studios = _jsonparams.Studios
ret = `Some Json`
return json.loads(ret)
app.run(server='paste', host='localhost', port=8080, debug=True, reloader=True)
And this is my Web Service code snippet.
I get a Status Code: HTTP/1.0 500 Internal Server Error
I have been following the Bottle and Jquery documentations but Im just not able to crack this.
Any help on this will be really greatful.

Consider the following things:
1) In JS, change the url to simply: /salesvolume.
2) In Python, remove the arg - db from the salesvolume function definition. Or else you might get this err (a 500 error):
TypeError: salesvolume() takes exactly 1 argument (0 given)
<myServerIP> - - [30/Jul/2015 13:31:27] "POST /salesvolume HTTP/1.1" 500 1328
3) Check indentation. Python it is! I guess
ret = Some Json and
return json.loads(ret) needs indentation (they should be inside the salesvolume function)
I wrote this similar stuff and it seems to be working:
Python:
from bottle import *
import json, requests
#route('/')
def atHome():
return template('index')
#route('/salesvolume', method="POST")
def salesvolume():
#your processings here...
ret = '{"key":"val"}'
return json.loads(ret)
run(host='0.0.0.0', port=8093, debug=True, reloader=True)
index.tpl and JS:
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<body>
<button onclick=ajaxF()>click</button>
</body>
<script>
function ajaxF(){
$.ajax({
type: "POST",
data: {"jstring": JSON.stringify("blah")},
url: "/salesvolume" ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
console.log('success');
console.log(data)
},
error: function() {
console.log("Something is not OK");
},
});
}
</script>
</html>
Hope it helps!

The following code worked for me in an app using bottle (sends some data to python and dispatches some data back as JSON from python to js):
js:
$.post('/getData', {myStringInput:dataToSendtoBottle}, function(data){
var myJson = JSON.parse(data) //myOutput is dispatched back to js as JSON
});
python:
#route('/getData', method='POST')
def getData():
myDataReceivedfromJs = request.forms.get('myStringIput')
if myDataReceivedfromJs:
myStringOutput = 'OK'
myOutput = json.dumps(myStringOutput)
return myOutput

Related

Returning two arrays from a python script in Django and utilizing in Ajax simultaneously

I have a python script running in views.py within Django which returns two very large string arrays, x and y. It currently is able to run off a button press within my index.html.
def python_file(request):
final()
return HttpResponse("ran")
The ajax code I have running to do the button press.
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
function gotoPython(){
$.ajax({
url: "/python_file",
context: document.body
}).done(function() {
alert('finished python script');
});
}
</script>
It's also attached to the URLS.py. I know there's no array being returned right now, because I am unsure how to run the script, get the data simultaneously, then add it to the page without refreshing the page. So, I am asking what would be the best practice to do what I described. Any help would be appreciated.
This is generally what I do, not sure if it's best practice, but I return it with Json
I included two examples, and POST and a GET.
I also included some other stuff I usually return status and msg. When I catch an error or have an invalid POST I send back status = False and msg = '{error message}, then I can show that error message in the front end with Javascript. I keep this standardized in my project, but you do you.
def python_file(request):
xArray, yArray = final()
import json
data = {
'status': True, # True=All Good. False=Caught Error but didn't crash.
'x': xArray,
'y': yArray,
'msg': 'returning x and y arrays',
}
return HttpResponse(
json.dumps(data),
content_type="application/json"
)
function gotoPython(){
$.ajax({
method: 'GET',
url: '/python_file',
success: function(data){
console.log(data)
if (data['status']){
// do things with arrays
data['x']
data['y']
}else{
console.log('Server Replied with Error, but did not Crash');
console.log(data['msg']);
};
},
error: function(event,xhr,settings,errorText){
// general `xhr.status` Key for common errors
// 0 = Server didn't Reply (Server Down)
// 400 = Bad Request (Syntax Error)
// 403 = Forbidden (Login Token Expired or not in Group)
// 403 = Not Found (Invalid Url)
// 500 = Server Error (Django Crash)
},
});
};
function gotoPythonWithData(){
// if you wanted to POST data to this function you'd just do
// Note: Requires csrfmiddlewaretoken in template
// Throw this anywhere (it's hidden): {% csrf_token %}
submitData = {
'return_item_count': 25,
'csrfmiddlewaretoken': $('[name=\'csrfmiddlewaretoken\']').val(),
};
$.ajax({
method: 'POST',
url: '/python_file',
data: submitData,
success: function(data){
if (data['status']{
// do stuff
}else{
console.log(data['msg']);
};
},
error: function(event,xhr,settings,errorText){
},
});
};
Note: Some things like, Django Decimal objects, can not be be put into a Json Dump. In the Decimal example you've got to turn them into a Float or an Int
You can add parameters to the ajax.done(function) in order to get what your server returned.
$.ajax({
url: "/python_file",
context: document.body
}).done(function (response, textStatus, jqXHR) {
// What happens when the call is successful (200 <= status code < 300
console.log(response); // Logs what you returned from your django
// x + "separator" + y
})
.fail(function (jqXHR, textStatus, errorThrown) {
// Status code over 400
})
.always(function (jqXHR, textStatus, errorThrown) {
// Always happens
...
});
You can check ajax documentation here : https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings-settings
And your django view should return some text content :
def view(response):
// code
return HttpResponse(status=200, content=x + "separator" + y)

404 (Not Found) in ajax post url due to file upload

jQuery("#myform").submit(function (e) {
e.preventDefault();
var formData = new FormData(this);
jQuery.ajax({
type:'POST',
url:'{% url 'editJobDesc' %}',
data: formData,
cache:false,
contentType: false,
processData: false,
success: function (data) {
alert("Done");
}
});
});
The code works perfectly fine in localhost but shows 404 url not found when hosted on server.
In django views.py:
profile = request.POST.get('profile')
jd = request.FILES.get('jd')
Django urls.py:
path('editJobDesc', views.editJobDesc, name="editJobDesc"),
I found out that error is due to the file I am trying to upload using ajax. If I try to upload other inputs it works fine.
I even tried appending file with formData but still I get the same error.

Unable to receive data from AJAX call [Flask]

What I Am Trying To Do: Receive data from AJAX to Flask. Eventually, I would like to send token data (Which will come from stripe) to the flask side
The Problem: I can't print any data to the console. So I'm assuming data is not being passed through.
I am unable to receive data from my Ajax call. I have been searching for some time now and I haven't found a fix. I've seen multiple different solutions for others but none of them worked for me. I'm am trying to implement a custom Stripe payment flow.
What I plan to do eventually is to pass in all the data I need (in the token) through the 'data' parameter in JSON format. Here are the different sides of code
index.html
var handler = StripeCheckout.configure({
key: 'test_key',
image: 'image_url',
locale: 'auto',
token: function(token) {
$.ajax({
url: '/charge',
data: {
'token': '(data im trying to access/print in app.py)'
},
type: 'POST',
success: function(response) {
console.log(response);
},
error: function(error) {
console.log("ERROR");
console.log(error);
},
dataType: "json",
contentType: "application/json"
});
}
});
app.py
from flask import Flask, request
import json
#app.route('/charge', methods=['POST'])
def charge():
# Grab token information
token = request.form['token']
# The line below never prints to console
print(token)
# This test print statement below never prints to console
print("This print statement never runs")
Nothing prints to the console. I've wasted so much time on this so any leads or pointers would be greatly appreciated!
UPDATES
I did some updates suggested by #Daniel Roseman but nothing at all prints to the console.
Try the following code
In javascript:
var data = {token: token}
$.ajax({
url: '/charge',
data: JSON.stringify(data),
type: 'POST',
success: function (response) {
console.log(response);
},
error: function (error) {
console.log("ERROR");
console.log(error);
},
dataType: "json",
contentType: 'application/json;charset=UTF-8',
});
In controller [charge method]:
from flask import Flask
from flask import render_template, request, jsonify
#app.route('/charge', methods=['POST'])
def charge():
# Grab token information
token = request.json['token']
# This is the expected token from json
print(token)
# This test print statement below now prints to console
print("This print statement now runs surely")
# return JSON
return jsonify(
code=0,
msg="Success"
)
You're not posting JSON.
Instead of accessing request.get_json(), you can just access the individual elements from the request.form dictionary. In this case:
token = request.form['token']

Receive JSON in python Bottle

I am trying to do a JSON post to my Bottle server.
from bottle import request, route, run
#route('/feedback', method='POST')
def feedback():
data = request.json
print data
run(host='localhost',port=8080)
In the client side, I have
$('#user_feedback').submit(function() {
var feedback = {"id": 1}
$.ajax({
type: "POST",
url: "http://localhost:8080/feedback",
data: feedback
});
return false;
});
I am returning false here because I don't want the page to be redirected.
However, the data I received in my Bottle server is always None when printed out.
Please help. Thank you.
request.json expects the content type of the request to be application/json .
So to make it work, you should set the contentType property of your request to application/json and stringify your data :
$.ajax({
type:"POST",
contentType: "application/json",
url:"/feedback",
data: JSON.stringify(feedback)
});

'Request' object has no attribute 'json'

I've run the following command in the terminal to verify my current installation of cherryPy
python -c "import cherrypy;print cherrypy.__version__"
3.3.0
However, the following code results in error:
#cherrypy.expose
#cherrypy.tools.json_in()
def observe(self, urlParam1=None):
print cherrypy.request.json
return ""
When running this I get the following error:
File "C:\Anaconda\lib\site-packages\cherrypy\__init__.py", line 224, in __getattr__
return getattr(child, name)
AttributeError: 'Request' object has no attribute 'json'
EDIT:
This is how I'm sending the request:
var insertJSON = JSON.stringify(insertObj);
$.ajax({
type : "POST",
contentType : "application/json",
url : 'http://10.XX.X.XXX:XXXX/observe',
data : insertJSON,
dataType : "json",
success : function(result) {
alert('observation inserted');
}
});
Edit 2:
I'm doing this all in Eclipse with PyDev. If I control-click on request in cherrypy.request it opens up the file cherypy__init__.py as should be expected. However, if I control-click on json, it doesn't know where the file is.
I've tried uninstalling the library manually - and then redownloading from https://pypi.python.org/pypi/CherryPy/3.2.4 and placing the appropriate folders in C:\Anaconda\Lib\site-packages
The JSON parameter does not exist in the OPTION method, only in the POST.
With CORS, when you POST, you have 2 requests: one is a OPTION, the second is the POST.
Add a simple test in your method:
#cherrypy.expose
#cherrypy.tools.json_out()
#cherrypy.tools.json_in()
def dosomething(self):
result = {"operation": "request", "result": "success"}
if cherrypy.request.method == "POST":
print(cherrypy.request.json)
return result
Are you posting the json object? This code works fine for me.
import cherrypy
class HelloWorld(object):
#cherrypy.expose
#cherrypy.tools.json_in()
def observe(self, urlParam1=None):
print(cherrypy.request.json)
return ""
#cherrypy.expose
def asdf(self):
return """<!DOCTYPE HTML>
<html>
<head>
<script>function Sendjson(){
// code for IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else// code for IE5
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.open("POST","/observe", true);
xmlhttp.setRequestHeader('Content-Type', 'application/json');
xmlhttp.send(JSON.stringify(({name:"Bob"})));
}
</script>
</head>
<body onload="Sendjson();">
</body>
</html>"""
cherrypy.quickstart(HelloWorld())
Hope this helps!
You might run into this issue if you are missing json_in()
#cherrypy.tools.json_in()
def POST(self, ...):
...
Well, it's true, you are sending the POST data as JSON, not as typical form-encoded data, and thus you never set the key json. You can do
$.ajax({
type : "POST",
url : 'http://10.XX.X.XXX:XXXX/observe',
data : {json: insertJSON},
// ^^^^
success : function(result) {
alert('observation inserted');
}
});
Or if you really want to send the data JSON encoded, you have to access the raw request body. See How to receive JSON in a POST request in CherryPy?.

Categories

Resources