Edited at

Flask + jQueryでテーブルの入力フォームに入力があるたびに値を取得

Flask + jQueryでテーブルの入力フォームに入力があるたびに値を取得して、コンソール(F12で表示)にログをはき続ける。

忘れそうなのでメモ

jQueryでポストする際の基本

サーバー側


server.py

from flask import Flask

from flask import render_template
from flask import request
from flask import jsonify
from flask_bootstrap import Bootstrap

()

@app.route('/complete', methods=['POST'])
def complete():
json_data = request.json
return jsonify({'value': json_data})


クライアント側


index.html

$(function ($){

// テーブルの入力フォームにインプットした際に発動
$('td input').on('input',function () {
// name属性と入力フォームの値を取得
var inp = {name: $(this).attr('name'),
value: $(this).val()};
console.log(inp); // 入力をjavascriptでコンソールに表示
inp = JSON.stringify(inp);

$.post({
url: '{{ url_for('complete') }}', // server.py complete()に渡す
data: inp,
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
}).done(function(data){
console.log(data); // 入力をserver.pyを通して表示
}).fail(function(){
console.log('fail');
});
});
});


456

456あ

と入力した結果

日本語も問題なく受け取れる。

入力するたびなので、「4,45,456,456あ」すべてがコンソールに表示されてウザイ。

jquery_flask.PNG

1,3つめの塊がJavaScriptのconsole.log

2,4つめの塊がserver.pyを通しての表示。

Pythonで加工してから表示できる。