使用 Flask 保存 HandsOnTable 数据

Question

我正在尝试从 HandsOnTable using Flask. I'm following these instructions 加载和保存数据，以便使用 ajax 加载和保存（检索和发送）数据。我已经设法从 URL 和 returns 一个 JSON 字典中获取数据以加载到 table 中，但我还没有弄清楚如何发送数据存储在我的数据库。

javascript 的相关部分如下所示：

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';
      }
    });
  });

希望这是从 HandsOnTable 中获取数据，将其转换成这种格式的大 JSON table：

{'data' : [[row 1], [row 2],...]}

下面是相关的 Flask 视图函数：

@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'

删除了不相关的部分。基本上我的问题是如何使保存功能的 data = request.form['data'] 部分起作用，并将其变成一个简单的行列表？

顺便说一句，这之所以困难，部分原因在于我看不到通过 ajax 调用发送到视图函数的确切内容。有没有办法让我看到，这样我就可以更轻松地调试这样的问题？打印语句在视图函数中似乎不起作用（我在控制台中看不到它们）。

非常感谢，亚历克斯

更新根据 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';
  }
});

});

和

@app.route('/json/save/<int:well_id>', methods = ['GET', 'POST'])
@login_required
def jsonSave(well_id):
    jsonData = request.get_json()
    print 'jsonData:', jsonData
    data = jsonData['data']
    print 'data:', data
    #Insert table into database
    print 'saving', well_id
    return json.dumps(True)

调试输出：基本上，看起来 Flask 在调用 jsonData = request.get_json() 时没有加载 json 对象。然而，console.log(JSON.stringify({data: hot.getData()})); 看起来还不错。

这是浏览器和 Flask 控制台的输出：

浏览器：

{"data":[["01/01/15",100,300,200,96],["01/02/15",200,500,300,50],["01/03/15",300,600,400,80],["01/01/15",100,300,200,96],["01/02/15",200,500,300,50],["01/03/15",300,600,400,80],["01/01/15",100,300,200,96],["01/02/15",200,500,300,50],["01/03/15",300,600,400,80],[null,null,null,null,null]]}
samples.js:94 POST http://127.0.0.1:5000/json/save/1 500 (INTERNAL SERVER 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__'

Answer 1

这是一个很好的问题，到目前为止做得很好！现在，让我们从显而易见的事情开始。您正在使用 GET 请求向 Flask 发送数据，但您实际上是在尝试 POST 数据，这就是为什么 Python 在 request 中没有任何内容的原因。如果我错了请纠正我，因为情况可能并非如此，但这是调试它的方法：

你应该运行烧瓶放在 shell 某处。在这里您将看到任何 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 打印空行时试图打印 data).

编辑：

能够以您设置路线的方式接收参数是不正确的。还有为什么你有 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)

并且在您的 ajax 电话中：

ajax('/json/save/{{well['id']}}', 'POST', JSON.stringify({data: hot.getData()}), function (res) {})

此外，请 post 控制台日志和打印语句。我们这里还是一头雾水。

Answer 2

为了解决这个问题，我重新开始。我包含了这些 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>

我删除了从旧 jsfiddle 获得的 samples.js 文件。我认为它把事情搞砸了。

根据 ZekeDroid 的建议，我将烧瓶保存功能更改为：

@app.route('/json/save/<int:well_id>', methods = ['GET', 'POST'])
@login_required
def jsonSave(well_id):
    w = Well.query.get(well_id)
    jsonData = request.get_json()
    print 'jsonData:', jsonData
    data = jsonData['data']
    print 'data:', data

    #Load Data dictionary into the database.

    return json.dumps(True)

我用这个替换了 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 教程中获得保存功能（改为 here) to work, so I used the accepted answer here。我使用 POST 因为如果我理解正确的话，它没有像 GET 那样的大小限制，我将发送一些相当大的数组。

删除 samples.js 文件也破坏了加载功能，因此我将其替换为：

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);
    }
    });
});

这显然与保存功能非常相似。感谢 ZekeDroid 的所有帮助。

亚历克斯

使用 Flask 保存 HandsOnTable 数据

Saving HandsOnTable data with Flask

javascript

flask

handsontable