带有Jquery和JSON的FLASK
FLASK with Jquery and JSON
我看过一个关于如何用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"。
相关文章:
- jQuery匹配JSON对象的部分文本
- 在循环中分配json值时,值被覆盖
- 需要帮助设置json数组
- 如何在Javascript中将JSon对象转换为数组
- 我可以在json对象中添加一个函数吗
- 使用 AJAX 向 Flask 发送 JSON 语法错误
- 通过flask服务器上的队列访问d3.json对象时出现问题
- 带有Jquery和JSON的FLASK
- Python Flask Web服务器未接收到JSON ajax POST请求,服务器返回HTTP 200 OPTION
- 如何使用Python Flask应用程序在D3JS图表中动态加载JSON数据
- 将 Python Flask JSON 字典导入 JavaScript 错误
- 可以't通过ajax和flask获取json
- 试图POST json数据到python flask服务器的问题
- Backbone.js:如何显式地从flask端点请求json
- 如何使用jquery ajax正确地传递json对象到flask服务器
- Flask看不到Node发送的JSON数据
- 使用JQuery从Flask获取JSON有时会返回null
- 为Flask Restless获取带有json的uri查询
- Python to Javascript JSON objects (Flask)
- 如何打印从Flask接收到的JSON对象?