JSONデータと、そのファイル名をバックエンドに送付する処理について教えてください。

Question

HTMLテーブルを、JSONに変換したものを、POSTで送付し、
それをFLASKで受信する処理を書いています。

なんとかHTMLテーブルを送信、FLASKでPANDASのデータフレームに入れて、
CSV保存するところまで書けました。

しかしながら、ファイルネームをＦＥ側に埋め込んだ"upload_file"フィールドから
持ってくる必要があります。

JSONデータに埋め込むにしても、なるべくソースを修整せずに、
コードの追加のみで、やりとりできる方法はありませんでしょうか？
（別にJSONデータに埋め込んでもいいのですが、また前後で動かなくなる可能性だけは避けたいです）

すみませんが、ご教授をお願いしたく思います。

生成ボタンを押すと、ＨＴＭＬテーブルに名前（＊．ｃｓｖ）をつけたものを
バックエンド側にＰＯＳＴ送信をさせたい。

		function loading() {

			var data = $('#target').tableToJSON();

			$.ajax({
				type: "POST",
				url: "/csvout",
				contentType: 'application/json; charset=UTF-8',
				data: JSON.stringify(data),
				dataType: 'json',
				success: function (data) {
					console.log(data);
				},
				error: function (error) {
					console.log(error);
				},
			});
		}

@app.route('/csvout', methods=['POST'])
def csvout():

    if request.method == 'POST':
        df_s = pd.read_json(request.data)

        filename = request.form["upload_file"]
        df_s.csv(filename)

        return render_template('edit1.html', fname=filename, csvname=csvn)
    else:
        return redirect('/')

自己解決いたしました。
アドバイス頂いた方法と、ほとんど同じ方法でした。

$.ajax({
				type: "POST",
				url: "/csvout" + document.getElementById('fname').value,
				contentType: 'application/json; charset=UTF-8',
				data: JSON.stringify(data),
				dataType: 'json',
				success: function (data) {
					window.location.reload(true);
					console.log(data);
				},
				error: function (error) {
					console.log(data);
					alert("もう一度クリックしてください。");
				},
			});

Comments

[yambejp]

具体的には何がやりたいのでしょうか？
テキストデータにファイル名をつけてpostすればいいのですか？
jsからその「"upload_file"フィールド」というのは参照できるのでしょうか？

[yuujiMotoki]

説明不足で申し訳ありません。
具体的に実施したい内容は、HTMLテーブルにファイル名（＊．CSV)を付けた状態で、POSTメッセージで送り、バックエンドのサーバ上に保管をしたく思います。
UPLOAD_FIELDは画面上のテキストボックスに存在しています。
画面のスクリーンショットをつけます

[shinji709]

タグがJavaScriptとFlaskになってますがPythonのタグも付けておいたほうが良い回答もらえると思います。　追記: あとjQueryも。

Answer 1

要件に適うか分かりませんがURLに露出して困るものでなければファイル名だけクエリパラメータで渡しては？

        function loading() {

            var uploadFieldValue = $('[name=upload_file]').val();
            var data = $('#target').tableToJSON();

            $.ajax({
                type: "POST",
                url: "/csvout" + $.param({ fileName: uploadFieldValue }),
                contentType: 'application/json; charset=UTF-8',
                data: JSON.stringify(data),
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                },
                error: function (error) {
                    console.log(error);
                },
            });
        }

@app.route('/csvout', methods=['POST'])
def csvout():

    if request.method == 'POST':
        df_s = pd.read_json(request.data)

        filename = request.args["fileName"]
        df_s.csv(filename)

        return render_template('edit1.html', fname=filename, csvname=csvn)
    else:
        return redirect('/')

参考にしたもの:
jQuery .ajax() - add query parameters to POST request?

API — Flask Documentation (1.1.x)
Get the data received in a Flask request

Comments

[yuujiMotoki]

JQUERYに不慣れでしたが、書き方の参考にさせて頂きました。

var uploadFieldValue = $('[name=upload_file]').val();
var data = $('#target').tableToJSON();

$.ajax({
type: "POST",
url: "/csvout" + $.param({ fileName: uploadFieldValue }),

こういう風に書けるようになりたいものです