BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] htmlフォームのデータを使ってJSONオブジェクトを送信する方法

2022-04-26 18:12:45

質問

そこで、このような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>

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

UPDATE ここまでやったが、うまくいかないようだ。 

<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));

私は何を間違えているのだろう？

どのように解決するのですか？

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

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

後でajaxで使うことができます。また、ajaxを使用しない場合は、hidden textareaに記述し、サーバーに渡します。もしこのデータが通常のフォームデータとして json 文字列で渡された場合、このデータを json_decode . すると、すべてのデータを配列で取得することができます。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します