jqueryフォームデータをjsonデータに変換します-フロントエンドQ&A-php.cn

jqueryフォームデータをjsonデータに変換します

PHPz

リリース： 2023-05-28 14:43:38

オリジナル

1796 人が閲覧しました

フロントエンド開発の発展に伴い、フォーム送信方法を従来の同期リクエストから非同期リクエストに変更する Web サイトやアプリケーションが増えています。このプロセスでは、フロントエンドはフォーム内のデータを JSON 形式に変換し、Ajax リクエストを通じて処理するためにバックエンドに送信する必要があります。そのためには、いくつかの関連テクノロジーを習得する必要があります。

jQuery を使用してフォームを操作する場合、次のコードを通じてフォームデータを JSON 形式に変換できます。

var formData = $('form').serializeArray(); // 将表单序列化为键值对数组
var jsonData = {};
$.each(formData, function() {
    if (jsonData[this.name]) { // 如果json中已经有了该属性，则将其转换为数组
        if (!jsonData[this.name].push) {
            jsonData[this.name] = [jsonData[this.name]];
        }
        jsonData[this.name].push(this.value || '');
    } else {
        jsonData[this.name] = this.value || ''; // 如果是第一次添加该属性，则直接加入json中
    }
});

ログイン後にコピー

上記のコードでは、最初に serializeArray( ) メソッドフォームをキーと値のペアの配列 formData にシリアル化します。次に、変換された JSON データを保存する空のオブジェクト jsonData を作成します。最後に、$.each() メソッドを使用してフォームデータ配列を走査し、各キーと値のペアを jsonData に追加します。

上記のコードは、フォーム内で繰り返されるキーと値のペアを処理するために判断ステートメントを使用していることに注意してください。繰り返しの属性名が見つかった場合、それらは配列に変換され、新しい値が配列の真ん中。

完全な例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单数据转JSON数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('form').submit(function(event) {
                event.preventDefault(); // 阻止表单提交
                var formData = $(this).serializeArray(); // 将表单序列化为键值对数组
                var jsonData = {};
                $.each(formData, function() {
                    if (jsonData[this.name]) { // 如果json中已经有了该属性，则将其转换为数组
                        if (!jsonData[this.name].push) {
                            jsonData[this.name] = [jsonData[this.name]];
                        }
                        jsonData[this.name].push(this.value || '');
                    } else {
                        jsonData[this.name] = this.value || ''; // 如果是第一次添加该属性，则直接加入json中
                    }
                });
                console.log(jsonData); // 打印转换后的JSON数据，可以通过Ajax请求发送到后端进行处理
            });
        });
    </script>
</head>
<body>
    <form>
        <label>姓名:</label>
        <input type="text" name="name" value="张三"><br>
        <label>性别:</label>
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女<br>
        <label>爱好:</label>
        <input type="checkbox" name="hobby" value="reading" checked>阅读
        <input type="checkbox" name="hobby" value="music">音乐
        <input type="checkbox" name="hobby" value="travel">旅游<br>
         <button type="submit">提交</button>
    </form>
</body>
</html>

ログイン後にコピー

このようにして、フォームデータを JSON 形式に正常に変換し、Ajax リクエストを通じてバックエンドに送信できるようになりました。同時に、フォームは送信する前にデフォルトの動作を防ぐ必要があることに注意してください。ここでは event.preventDefault() メソッドを使用します。

以上がjqueryフォームデータをjsonデータに変換しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。