☰

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

tag-icon • tag-icon javascript jquery html json forms
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));

何が間違っているのでしょうか?

ベストアンサー1

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

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

後で Ajax で使用できます。または、Ajax を使用していない場合は、非表示のテキスト領域に配置してサーバーに渡します。このデータが通常のフォーム データを介して JSON 文字列として渡される場合は、デコードする必要があります。その後、すべてのデータを配列で取得します。

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

おすすめ記事