web-dev-qa-db-ja.com

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

だから私はこの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));

何がおかしいのですか？

javascriptjqueryhtmljsonforms
105
kstratis

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

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"
});
114
SachinGutte

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

あなたが本当にクライアントからそれを処理したいならば、あなたはJavaScriptを使用することに頼らなければならないでしょう：

  1. dOMからフォームからあなたのデータを集める
  2. オブジェクトまたは配列にまとめる
  3. JSON.stringify を使ってJSONを生成する
  4. XMLHttpRequest でPOSTしてください

おそらくapplication/x-www-form-urlencodedデータに固執し、JSONの代わりにサーバー上でそれを処理する方が得策でしょう。あなたのフォームは、JSONデータ構造から恩恵を受ける複雑な階層を持っていません。

質問の大幅な書き換えに対応して更新する…

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

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

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

スクリプトの中形式は宣言されていません。

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