AjaxのPostで送信するdataオプションの格納場所

Question

前提

ajaxでデータを送信して、pythonで送信されたデータを取得してファイルに保存したいと考えています。
しかし、postで送信したデータがリクエストのフォームやボディにも存在しておらず、どこからデータを取得すればいいのかわからずに困っています。

実現したいこと

ajaxのdataオプションで指定し送信するJSONデータの受信

発生している問題・エラーメッセージ

ajaxのPostで送信されたデータがどこに格納されているのかわからず、データの取得が出来ていません。
vscodeでrequestのbodyやformにはデータが格納されていませんでした。
ただ、Chromeの検証機能のネットワークタブでajaxのPost送信のペイロードを確認すると、想定したデータが送信されていました。
ajaxで送信するデータはどこに格納されているのでしょうか？

該当のソースコード

						$.ajax({
							type: "POST",
    						url: `/save/draw-diagram`,
    						dataType: "json",
							data: {"diagram" : msg.data}
						})
							.done(function () {
								console.log("success");
								})
							.fail(function () {
								console.log("failed");
								});

補足：dataオプションのmsg.dataには文字列が格納されています。

from fastapi import APIRouter, Request

@router.post("/save/draw-diagram", response_class=HTMLResponse)
def save_diagram(request: Request):
    try:
        data = request.body
        print(data)
        with open('./test.txt', mode='w') as f:
            f.write(data)

補足：pythonはFastAPIを使用して、AjaxからのPost

Comments

[hoshi-takanori]

request.body には () が必要なのでは。そして、async や await も？
https://stackoverflow.com/questions/64379089/fastapi-how-to-read-body-as-any-valid-json

[退会済みユーザー]

質問者さん、無言ですが、回答したのでそれに対するフィードバックをタイムリーに返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。

[yammer]

申し訳ありません、アドバイス頂いていたのに返信が出来ておりませんでした。
関数へのasyncの追加とrequest.body()に変更したことで、データを受け取ることができました。

[退会済みユーザー]

> 関数へのasyncの追加とrequest.body()に変更したことで、データを受け取ることができました。

何をしたのか分かりませんが、それは Python 側の話ですか？　回答欄に何をどのようにしたのか具体的に書いて、それにマークをつけてこのスレッドはクローズしていただくようお願いします。

Answer 1

Python には触ったこともないのでハズレかもしれませんが・・・

データを受け取る側はどういう形式でデータが送られてくることを期待しているのでしょう？

質問のコードを見ると、送る側は jQuery.ajax を利用して data オプションに送信するデータを設定しているようですが、例えば以下のようなデータを考えると、

var j = { Id: 5, Name: "日本語" };  // j はオブジェクト
var jsonString = JSON.stringify(j); // jsonString は文字列

POST 要求の場合 data に設定するのは:

(a) 受け取る側が application/x-www-form-urlencoded 形式を期待している場合は ｊ 即ち JavaScript オブジェクト、

(b) JSON 文字列を期待している場合は jsonString 即ち JSON 文字列

・・・になるはずです。詳しくは以下の記事を見てください。

jQuery.ajax の data の型
http://surferonwww.info/BlogEngine/post/2015/10/05/what-must-be-set-to-data-option-in-jquery-ajax.aspx

質問のコードの data: {"diagram" : msg.data} は JSON 文字列ではないし JavaScript オブジェクトにも見えませんが、jQuery.ajax は data は JavaScript オブジェクトと解釈して application/x-www-form-urlencoded 形式でデータを送信しているが、受け取る側は JSON 文字列を期待しているということはありませんか？

ハズレでしたらすみません。

Comments

[yammer]

回答ありがとうございます。
dataの形式についての言及は、大変参考になりました。

Answer 2

fetchでやるとよいでしょう。
type=fileで設定したデータを送る場合と
html上で任意に作成したデータを送る場合は処理がことなります
とくに後者の場合ファイル名の設定やマイムタイプの指定などが必要となります

追記

JSONデータをファイルで送りたいのかと思ったのですが
質問の意図と違いましたかね・・・

const data={hoge:[1,2,3],fuga:["a","b","c"]};
const filename="test.json";
const json = JSON.stringify(data);
const type = "application/json";
const blob=new Blob([json],{type});
const method="post";
const body=new FormData();
body.append("test",blob,filename);
const url="・・・";
fetch(url,{method,body}).then(res=>res.text()).then(console.log);

とすればファイルで送られます

Comments

[yammer]

今回は、JSOＮデータを文字列として渡してあげることを考えていましたが、今後はファイルで渡す場合もあると思いますので参考にさせていただきます。