前提

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

実現したいこと

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

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

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

該当のソースコード

JavaScript（ajaxの箇所の抜粋）
1						$.ajax({
2							type: "POST",
3    						url: `/save/draw-diagram`,
4    						dataType: "json",
5							data: {"diagram" : msg.data}
6						})
7							.done(function () {
8								console.log("success");
9								})
10							.fail(function () {
11								console.log("failed");
12								});

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

python
1from fastapi import APIRouter, Request
2
3@router.post("/save/draw-diagram", response_class=HTMLResponse)
4def save_diagram(request: Request):
5    try:
6        data = request.body
7        print(data)
8        with open('./test.txt', mode='w') as f:
9            f.write(data)

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

hoshi-takanori

2022/05/24 03:36

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

SurferOnWww

2022/05/24 22:39

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

yammer

2022/05/26 12:38

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

SurferOnWww

2022/05/26 12:55

> 関数へのasyncの追加とrequest.body()に変更したことで、データを受け取ることができました。何をしたのか分かりませんが、それは Python 側の話ですか？　回答欄に何をどのようにしたのか具体的に書いて、それにマークをつけてこのスレッドはクローズしていただくようお願いします。

回答2件

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 文字列を期待しているということはありませんか？

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

投稿2022/05/24 03:33

SurferOnWww

総合スコア17925

回答へのコメント

yammer

2022/05/26 12:50

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

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

追記

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

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