带有Jquery和JSON的FLASK

FLASK with Jquery and JSON

本文关键字:FLASK JSON Jquery 带有      更新时间:2023-12-30

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

烧瓶可以使用串行功能吗?或者是关于我定义url的方式必须更改,因为Flask和教程中的路由系统不同?

我知道用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 %}

这只是一个猜测,但连接要将表单数据发送到的url的方式是,连接"url+input",url为"/jsonurl",input为表单的序列化数据,格式为"field1=value1&field2=value2"等。serialize函数不会在数据前加上问号,您必须自己提供,因此,当前构建url的方式是这样的:"/jsonurlfield1=value1&field2=value2",它将把表单数据发送到"/jsonulfield1"而不是"/jsonurl"。试着添加自己的和号,比如"url+'?'+input"。