HTMLフォームデータを使用してJSONオブジェクトを送信する方法

129

だから私はこのHTMLフォームを持っています：

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

ユーザーが送信をクリックしたときに、このフォームのデータをJSONオブジェクトとしてサーバーに送信する最も簡単な方法はどれですか。

更新：私はこれまで行ってきましたが、うまくいかないようです：

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));

何が悪いのですか？

— クストラティス
ソース

1

見てください$.ajaxとserializejQueryのAPIでを。

— Rory McCrossan 2014年

1

それは絶対にJSONオブジェクトでなければなりませんか？オブジェクトはどのような構造にする必要がありますか？

— Anthony Grist 2014年

1

@AnthonyGristはい、JSONでなければならないので、ReSTサービスを対象としています。

— kstratis 2014年

4

「動作しないようです」とはどういう意味ですか？画面が見えないことを忘れないでください。

— ダウハイアーチ

2

@ Konos5-RESTはJSONとは関係ありません。データが特定の形式である必要はありません。

— danielm

136

完全なフォームデータを配列として取得し、jsonで文字列化します。

var formData = JSON.stringify($("#myForm").serializeArray());

後でajaxで使用できます。または、ajaxを使用していない場合。それを隠しテキストエリアに置き、サーバーに渡します。このデータが通常のフォームデータを介してjson文字列として渡される場合は、json_decodeを使用してデコードする必要があります。その後、配列内のすべてのデータを取得します。

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

— サチングッテ
ソース

4

質問にjQueryのタグを付けました。それを使用していますか？で$.ajax、このデータを渡すことは本当に簡単です。

— SachinGutte 2014年

51

HTMLはフォームデータからJSONを生成する方法を提供しません。

それをクライアントから本当に処理したい場合は、JavaScriptを使用して次のことを行う必要があります。

DOMを介してフォームからデータを収集する
オブジェクトまたは配列に整理する
JSON.stringifyで JSONを生成する
XMLHttpRequestで POSTします

application/x-www-form-urlencodedデータにこだわり、JSONの代わりにサーバー上でデータを処理する方がよいでしょう。フォームには、JSONデータ構造の恩恵を受ける複雑な階層はありません。

質問の大幅な書き直しに対応して更新…

あなたのJSにはreadystatechangeハンドラがないので、あなたは応答で何もしません
デフォルトの動作をキャンセルせずに、送信ボタンがクリックされたときにJSをトリガーします。JS関数が完了するとすぐに、ブラウザーはフォームを（通常の方法で）送信します。

— クエンティン
ソース

1

わかりました。どうすれば修正できますか？

— kstratis 2014年

1

@Quentin：私の場合、ドメイン制御なしのクロスドメインPOSTが必要です。

— user2284570

1

@ user2284570 —新しい質問がある場合は、質問してください。

— クエンティン

1

enctype='application/json'JSONデータw3.org/TR/html-json-forms

— EkriirkE

4

@EkriirkE —そのページを読みましたか？それは、その周りに黒と黄色の危険な縞がある巨大な箱の中で注意

— クエンティン

3

コードは問題ありませんが、実行されません。送信ボタンの原因[type = "submit"]をtype = buttonに置き換えるだけです。

<input value="Submit" type="button" onclick="submitform()">

スクリプト内; フォームは宣言されていません。

let form = document.forms[0];
xhr.open(form.method, form.action, true);

— tdjprog
ソース

正確にtype = "button"は非常に重要です。使用しない場合は、urlパラメータでリダイレクトします。

— Rohit Parte

1

遅いですが、htmlのみを使用してオブジェクトを必要とする人のために、方法はあります。PHPなどの一部のサーバー側フレームワークでは、次のコードを記述できます。

<form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="name[first]" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="name[last]" id="lname"></p>

        <input value="Submit" type="submit">
    </form>

したがって、object[property]オブジェクトを取得する場合と同様に、入力の名前を設定する必要があります。上記の例では、次のJSONを使用してデータを取得しました。

{
"name": {
  "first": "some data",
  "last": "some data"
 }
}

— Orafaelreis
ソース