带有 Jquery 和 JSON 的烧瓶

Question

我看过一个关于如何使用 JSON、Jquery 和 PHP 制作可编辑表的教程，它似乎可以适应 Flask，除了最后一个函数是：$.getJSON(url+input, function(data) in my JS 文件（你可以在 JS 文件的底部看到这个）。当我点击可编辑表并更改里面的文本并按 Enter 时，它在浏览器调试控制台中显示：加载资源失败：服务器响应状态404（未找到）。我认为这是关于 url 问题，但为什么在教程中它工作正常但对我来说不是http://www.youtube.com/watch?v=-FNyIz37j3I

Flask 可以使用序列化功能吗？还是因为 Flask 中的路由系统和教程中的路由系统不同，所以我定义 url 的方式必须改变？

我知道使用 HTML5 可以更轻松地完成这项工作，但我真的很想研究这个过程，因为它对我来说非常有用。

JS 文件：

 $(function(){

 $('tbody').on('click', 'td', function() {

    displayForm( $(this) );

 });


function displayForm (cell) {

var column = cell.attr('name'),
    id = cell.closest('tr').attr('id'),
    cellWidth = cell.css('width')
    prevContent = cell.text(),
    form = '<form action="javascript: this.preventDefault"><input type="text" name="newValue" size= "4" value="'+prevContent+'"/><input type="hidden" name="id" value= "'+id+'" />'+'<input type="hidden" name="column" value="'+column+'"/></form>';

cell.html(form).find('input[type=text]')
.focus()
.css('width', cellWidth);

cell.on('click', function() {return false;});

cell.on('keydown', function(e) {

    if (e.keyCode == 13) {
        changeField(cell, prevContent);
    } else if (e.keyCode == 27) {
        cell.text(prevContent);
        cell.off('click');
    }

});
}

function changeField(cell, prevContent) {

cell.off('keydown');

var url = '/jsonurl',
    input = cell.find('form').serialize();


$.getJSON(url+input, function(data){

    if (data.success)
        cell.html(data.value);
    else {
        alert('There was a problem updating the data.');
        cell.html(prevContent);
    }

});

cell.off('click');

}
});

这是在 Python 文件中：

@app.route('/jsonurl')
def jsonurl():
    column = request.args.GET('column')
    id = request.args.GET('id')
    newValue = request.args.GET('newValue')

    g.db = connect_db()
    cur = g.db.execute('UPDATE customer SET column = newValue WHERE rowid=id')
    g.db.commit()
    g.db.close()
    return jsonify(success=True, value=newValue)

HTML 文件：

{% for item in customer %}

<tr id={{ item.rowid }}> <td class="name" > {{ item.name }} </td> <td class="lastname"> {{ item.lastname }} </td> </tr>     


    {% endfor %}

Answer 1

这只是一个猜测，但是您连接该 url 以将您的表单数据发送到的方式是连接“url + input”，url 是“/jsonurl”，而 input 是表单的序列化数据，其中将采用“field1=value1&field2=value2”等形式。序列化函数不会在数据前面加上问号，您必须自己提供，因此当前构建 url 的方式看起来像这样：“/jsonurlfield1=value1&field2=value2”，它会将表单数据发送到“/jsonurlfield1”而不是“/jsonurl”。尝试自己添加与号，例如“url + '?' + 输入”。