質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

解決済

jsからpythonへjsonを送りpython側でjsonの辞書形式に変換しようとするとエラーが出る

kunn
kunn

総合スコア1

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

1回答

0リアクション

0クリップ

254閲覧

投稿2022/09/26 14:10

前提

ここに質問の内容を詳しく書いてください。
(例)
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

実現したいこと

プログラミング初心者です。
jsでjson形式に変換しajaxとflaskを使ってpythonに送りpython側で辞書形式に変換し返すものを実装中にエラーが発生しました。
json_str = json.loads(data)の部分を書かないで送られてきたデータをそのまま返すようにするとエラーが出ないのでajaxでの通信はうまくいっていると思うのですが、json_str = json.loads(data)を書いたとたんエラーが出ます。
ここに実現したいことを箇条書きで書いてください。

  • ▲▲機能を動作するようにする

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

エラーメッセージ jquery-3.6.1.min.js:2 POST http://127.0.0.1:5000/test 500 (INTERNAL SERVER ERROR) jquery-3.6.1.min.js:2 POST http://127.0.0.1:5000/test 500 (INTERNAL SERVER ERROR)

該当のソースコード

python

import random import json array = random.sample(range(1,54),53) def speed(data): if data == "first": return array[0:4] else: json_str = json.loads(data) return json_str

該当のソースコード

js ソースコード $(document).ready(function(){ json_str = "first"; json = JSON.stringify(json_str); $.ajax ({ url: '/test', type: 'post', data: json, contentType: "application/json", }).done(function(data) { console.log(data) $(".me-card-number-1").attr({ "alt": data[0] }); $(".me-card-number-2").attr({ "alt": data[1] }); $(".me-card-number-3").attr({ "alt": data[2] }); $(".me-card-number-4").attr({ "alt": data[3] }); }).fail(function() { alert("失敗") }); }); var count = 4; $(".me-card-number-1").on("click",function() { let str = $(this).attr("class"); count += 1; let data = {"str":str,"count":count}; console.log(count); json = JSON.stringify(data); console.log(json) $.ajax({ url: '/test', type: 'post', data: json, dataType:"json", contentType: "application/json", }).done(function(data) { console.log(data); $(".me-card-number-1").attr({ "alt": data }); }).fail(function() { alert("失敗"); }); }); $(".me-card-number-2").on("click",function() { const str = $(this).attr("class"); count += 1; let json_array = {"str":str,"count":count}; console.log(str) json = JSON.stringify(json_array); $.ajax({ url: '/test', type: 'post', data: json, contentType: "application/json", }).done(function(data) { console.log(data) $(".me-card-number-2").attr({ "alt": data }); }).fail(function() { alert("失敗"); }); }); $(".me-card-number-3").on("click",function() { const str = $(this).attr("class"); count += 1; var json_array = {"str":str,"count":count}; console.log(str) json = JSON.stringify(json_array); $.ajax({ url: '/test', type: 'post', data: json, contentType: "application/json", }).done(function(data) { console.log(data) $(".me-card-number-3").attr({ "alt": data }); }).fail(function() { alert("失敗"); }); }); $(".me-card-number-4").on("click",function() { const str = $(this).attr("class"); count += 1; var json_array = {"str":str,"count":count}; console.log(str); json = JSON.stringify(json_array); $.ajax({ url: '/test', type: 'post', data: json, contentType: "application/json", }).done(function(data) { console.log(data) $(".me-card-number-4").attr({ "alt": data }); }).fail(function() { alert("失敗"); }); });
app.py ソースコード from flask import Flask from flask import request from flask import render_template import json import main app = Flask(__name__) #ページが開かれたときindex.htmlを表示させる @app.route("/") def index(): return render_template( "index.html" ) @app.route('/test', methods=['POST']) def test(): if request.method == 'POST': data = request.json #https://python.keicode.com/lang/functions-call-function-defined-in-another-file.php#1 #送られてきたデータをmain.pyのspeed関数に渡す main_data = main.speed(data) return main_data # webサーバーの立ち上げ if __name__ == "__main__": app.run(debug=False)

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。