4

HTML フォームがあり、そのフォームには 2 つのフィールド (名前、説明) があります。ユーザーがそのフォームの送信ボタンを押すと、フォーム データを json 形式で送信します。

私は次のことを試しました：

        function submitData(){
            payload.name = $("#project-name").val();
            payload.description = $("#project-description").val();

            $.post("http://localhost:5000/task-groups/add", payload);
            return false;
        }

フォームのボタンがクリックされると、Submitdata が呼び出されます。しかし、これはjsonデータではなくフォームデータを送信しています

私はpythonフラスコサーバーを実行しています。

[1]私がするとき：

payload = request.get_json()
name = payload['name']

次の例外をスローしています

File "/Users/saik/projects/mturk/server/src/index.py", line 37, in add_task_group
  name = payload['name']
TypeError: 'NoneType' object is not subscriptable

[2] ただし、次を使用してサーバー側のデータにアクセスできます。

name = request.form['name']

[1] を使用してデータにアクセスできるように、フォーム送信時に json データを送信することは可能ですか?

フォーム送信時に JSON データを送信しようとしている理由は、コマンド ライン クライアントに REST API を提供するサーバーがあるためです。また、同じサーバーとエンドポイントを使用して、ブラウザー ベースのクライアントにサービスを提供したいと考えています。

4

4 に答える 4

4

jQuery AJAX 呼び出しで JSON をサーバーに送信するには、次の 2 つのことを行う必要があります。

  • リクエスト ペイロードは、JSON ペイロードを含む文字列にする必要があります (JavaScript オブジェクトではありません)。

  • HTTP リクエストの「Content-Type」ヘッダーは「application/json」に設定する必要があります。これにより、リクエスト ペイロードに JSON データが含まれていることがサーバーに通知されます。$.post は、「Content-Type」ヘッダーに「application/x-www-form-urlencoded」のデフォルト値を使用します。$.ajax では、「contentType」オプションを介してこのヘッダーを設定できます。

コードを次のように変更してみてください。

$.ajax({
  type: 'POST',
  url: 'http://localhost:5000/task-groups/add',
  contentType: 'application/json',
  dataType: 'json',
  data: JSON.stringify(payload)
});

$.post には dataType パラメータがありますが、これは "Accept" リクエスト ヘッダーを制御することに注意してください。これは、レスポンスの優先フォーマットを示すために使用されます。

于 2013-09-26T08:36:34.103 に答える
0

よくわかりません...しかし、JSONとして渡すことはこれを行う正しい方法ではないと思います...または単に「面倒」です...

なぜこのようにしないのですか？

payload = request.form
name = payload['name']
于 2013-08-22T07:17:51.960 に答える
0

ajax 呼び出しを使用すると、次のコードを使用して正常に送信できます。

<script>
$(document).ready(function(){
$("#submitform").click(function(e)
{
var MyForm = JSON.stringify($("#myform").serializeJSON());
console.log(MyForm);
 $.ajax(
 {
 url : "<your url>",
 type: "POST",
 data : MyForm,

 });
 e.preventDefault(); //STOP default action

});
});
</script>
于 2016-11-25T04:55:31.623 に答える