Javascript 使用Flask保存可手持数据
我正在尝试从使用烧瓶加载和保存数据。下面我将介绍如何使用ajax加载和保存(检索和发送)数据。我已经设法从一个返回JSON字典的URL将数据加载到表中,但我还没有弄清楚如何将数据发送到数据库中 下面是javascript的相关部分:Javascript 使用Flask保存可手持数据,javascript,flask,handsontable,Javascript,Flask,Handsontable,我正在尝试从使用烧瓶加载和保存数据。下面我将介绍如何使用ajax加载和保存(检索和发送)数据。我已经设法从一个返回JSON字典的URL将数据加载到表中,但我还没有弄清楚如何将数据发送到数据库中 下面是javascript的相关部分: Handsontable.Dom.addEvent(save, 'click', function() { // save all cell's data ajax('/json/save.json', 'GET', JSON.stringify({
Handsontable.Dom.addEvent(save, 'click', function() {
// save all cell's data
ajax('/json/save.json', 'GET', JSON.stringify({data: hot.getData()}), function (res) {
var response = JSON.parse(res.response);
if (response.result === 'ok') {
exampleConsole.innerText = 'Data saved';
}
else {
exampleConsole.innerText = 'Save error';
}
});
});
@app.route('/json/save.json', methods = ['GET', 'POST'])
@login_required
def jsonSave():
data = request.form['data']
#Do stuff to load data into database
return 'ok'
因此,希望这是从HandsOnTable中获取数据,将其转换为这种格式的大型JSON表:
{'data' : [[row 1], [row 2],...]}
下面是相关Flask view函数的外观:
Handsontable.Dom.addEvent(save, 'click', function() {
// save all cell's data
ajax('/json/save.json', 'GET', JSON.stringify({data: hot.getData()}), function (res) {
var response = JSON.parse(res.response);
if (response.result === 'ok') {
exampleConsole.innerText = 'Data saved';
}
else {
exampleConsole.innerText = 'Save error';
}
});
});
@app.route('/json/save.json', methods = ['GET', 'POST'])
@login_required
def jsonSave():
data = request.form['data']
#Do stuff to load data into database
return 'ok'
去掉不相关的部分。基本上,我的问题是如何使save函数的data=request.form['data']
部分工作,并将其转换为一个简单的行列表
顺便说一句,这之所以困难,部分原因是我看不到通过ajax调用发送到view函数的确切内容。有没有一种方法可以让我更容易地调试这样的问题?打印语句在视图函数中似乎不起作用(我在控制台中看不到它们)
非常感谢,
亚历克斯
更新根据ZekeDroid的指示(再次)更改为:
Handsontable.Dom.addEvent(save, 'click', function() {
// save all cell's data
console.log(JSON.stringify({data: hot.getData()}));
ajax('/json/save/{{well['id']}}', 'POST', JSON.stringify({data: hot.getData()}), function (res) {
var response = JSON.parse(res.response);
if (response.result === 'ok') {
exampleConsole.innerText = 'Data saved';
}
else {
exampleConsole.innerText = 'Save error';
}
});
}))
及
烧瓶:
jsonData: None
127.0.0.1 - - [13/May/2015 11:41:31] "POST /json/save/1 HTTP/1.1" 500 -
Traceback (most recent call last):
File "C:\Users\aschmitt\Envs\PetroTools\lib\site-packages\flask\app.py", line
1836, in __call__
return self.wsgi_app(environ, start_response)
File "C:\Users\aschmitt\Envs\PetroTools\lib\site-packages\flask\app.py", line
1820, in wsgi_app
response = self.make_response(self.handle_exception(e))
File "C:\Users\aschmitt\Envs\PetroTools\lib\site-packages\flask\app.py", line
1403, in handle_exception
reraise(exc_type, exc_value, tb)
File "C:\Users\aschmitt\Envs\PetroTools\lib\site-packages\flask\app.py", line
1817, in wsgi_app
response = self.full_dispatch_request()
File "C:\Users\aschmitt\Envs\PetroTools\lib\site-packages\flask\app.py", line
1477, in full_dispatch_request
rv = self.handle_user_exception(e)
File "C:\Users\aschmitt\Envs\PetroTools\lib\site-packages\flask\app.py", line
1381, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "C:\Users\aschmitt\Envs\PetroTools\lib\site-packages\flask\app.py", line
1475, in full_dispatch_request
rv = self.dispatch_request()
File "C:\Users\aschmitt\Envs\PetroTools\lib\site-packages\flask\app.py", line
1461, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "C:\Users\aschmitt\Envs\PetroTools\lib\site-packages\flask_login.py", lin
e 758, in decorated_view
return func(*args, **kwargs)
File "C:\Users\aschmitt\Dropbox\Python\PetroTools\app\views.py", line 236, in
jsonSave
data = jsonData['data']
TypeError: 'NoneType' object has no attribute '__getitem__'
到目前为止,这是一个很好的问题,也是一个很好的工作!现在,让我们从显而易见的开始。您正在使用
GET
请求将数据发送到Flask,但实际上您正在尝试POST
数据,这就是为什么Python在请求中没有任何内容的原因。如果我错了,请纠正我,因为情况可能并非如此,但以下是调试方法:
你应该把烧瓶放在某个地方。在这里,您将看到任何print
语句,因此,在jsonSave()
中,在定义后立即添加行print data
。此外,您错误地检索数据有两个原因。首先,语法如下:
jsonData = request.get_json()
data = jsonData["data"]
此外,如果您希望得到状态响应,那么使用JSON和布尔值进行响应可能是值得的:
return json.dumps(True)
现在是前端。在将数据发送到服务器之前,只需将其打印到控制台。在ajax
调用的正上方添加此行:
console.log(JSON.stringify({data: hot.getData()}));
这应该足以让您调试双方。在看到这一点并进行更改后,我建议您应该更好地理解错误所在,但如果没有,请使用您认为相关的输出更新您的问题(例如,如果python在尝试打印数据时打印空行)
编辑:
以设置路线的方式接收参数是不正确的。还有,为什么要使用save.json
?相反,请尝试以下方法:
@app.route('/json/save/<well_id>', methods = ['GET', 'POST'])
@login_required
def jsonSave(well_id):
jsonData = request.get_json()
data = jsonData['data'] # this will fail if it is not a POST request
print 'data:', data
#Do stuff to load data into Database
print 'saving', well_id
return json.dumps(True)
另外,请张贴控制台日志并打印报表。我们现在还不清楚。为了解决这个问题,我重新开始。我包括以下javascript文件:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
我将jquery保存函数替换为:
Handsontable.Dom.addEvent(save, 'click', function() {
// save all cell's data
var arr = { data: hot.getData()};
$.ajax({
url: '/json/save/{{well['id']}}',
type: 'POST',
data: JSON.stringify(arr),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: true,
success: function(msg) {
console.log(msg);
}
});
});
Handsontable.Dom.addEvent(load, 'click', function() {
var arr = { data: []};
$.ajax({
url: '/json/load/{{well['id']}}',
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(arr),
dataType: 'json',
async: true,
success: function(msg) {
hot.loadData(msg.data);
console.log('Loaded:');
console.log(msg.data);
}
});
});
我无法从handsontable教程()中获得save函数,因此我使用了接受的答案。我使用POST是因为如果我理解正确的话,它不像GET那样有大小限制,我将发送一些相当大的数组
删除samples.js
文件也破坏了加载功能,因此我将其替换为:
Handsontable.Dom.addEvent(save, 'click', function() {
// save all cell's data
var arr = { data: hot.getData()};
$.ajax({
url: '/json/save/{{well['id']}}',
type: 'POST',
data: JSON.stringify(arr),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: true,
success: function(msg) {
console.log(msg);
}
});
});
Handsontable.Dom.addEvent(load, 'click', function() {
var arr = { data: []};
$.ajax({
url: '/json/load/{{well['id']}}',
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(arr),
dataType: 'json',
async: true,
success: function(msg) {
hot.loadData(msg.data);
console.log('Loaded:');
console.log(msg.data);
}
});
});
这显然与save函数非常相似。谢谢你的帮助
亚历克斯非常感谢。我已经做了你的改变,但我还是做错了什么。当我第一次加载页面时,它给了我两个错误,GEThttp://127.0.0.1:5000/index.html 404(未找到)
和未捕获类型错误:无法读取null的属性'querySelectorAll'。当我试图保存数据时,它会显示GEThttp://127.0.0.1:5000/json/save.json/1 500(内部服务器错误)
和未捕获的语法错误:我用作参考点的意外标记,您可以在其中看到它包括
。那个文件已经不存在了,但我从way back机器上得到了一个存档版本并使用了它。不确定这是否是一些问题的根源?好的,让我们看看。首先,从更新的问题来看,你做错了两件事。一个是ajax调用仍在执行GET请求,因此忽略了第三个参数;第二个是,在Flask代码中,您实际上没有获取任何参数,请参阅我的更新响应。第一个错误404是Flask错误。您做错了,因为没有“/index.html”的路由。querySelectorAll错误我不知道,因为我在代码中看不到您使用它的任何地方。jsonData
被设置为None,这会导致函数失败。