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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

PHPz

May 28, 2023 pm 02:43 PM

フロントエンド開発の発展に伴い、フォーム送信方法を従来の同期リクエストから非同期リクエストに変更する 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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

USESTATEの理解（）：React React Neact State Managementの包括的なガイドApr 25, 2025 am 12:21 AM

usestate（）isareacthookusedtomeStateinfunctionalComponents.1）itInitializeSandUpDatestate、2）colledatttheToplevelofComponents、3）canleadto'stalestate'ifnotusedly、and4）cancancancancancanbeoptimizeduptimizeduptimizedususecall -calleSuperesteSteSteSteSteSteSteSteSteStateSupteStateSuptateSuptatedates

Reactを使用することの利点は何ですか？Apr 25, 2025 am 12:16 AM

ReactisPopularduetoitsComponent Architecture、Virtualdom、Richecosystem、およびdeclarativenature.1）コンポーネントベースのarchitectureallowsforReusable anduipieces、改善様式および測定可能性。

Reactでのデバッグ：一般的な問題の特定と解決Apr 25, 2025 am 12:09 AM

debugReactapplicationivivivity、EtheseStrategies：1）AddressPropdrillingWithContextapiorredux.2）HandLeasynchronousoperations withuthutateanduseeffect、Abortcontrollertopreventraceconditions.3）最適化合物を使用して、最適化合物を使用してください

ReactのUseState（）とは何ですか？Apr 25, 2025 am 12:08 AM

UseState（）inReactallowsstateManagementInFunctionalComponents.1）itsimplifiesstateManagement、makeCodemoreconcise.2）usetheprevcountFunctionToupDateStateBasedTateBasedTateBadeStateValue、AvolidingStalestateSues.3）

useState（）vs。usereducer（）：州のニーズに合った適切なフックを選択するApr 24, 2025 pm 05:13 PM

ChooseuseState()forsimple,independentstatevariables;useuseReducer()forcomplexstatelogicorwhenstatedependsonpreviousstate.1)useState()isidealforsimpleupdatesliketogglingabooleanorupdatingacounter.2)useReducer()isbetterformanagingmultiplesub-valuesorac

UseState（）を使用して状態を管理する：実用的なチュートリアルApr 24, 2025 pm 05:05 PM

UseStateは、州の管理を簡素化し、コードをより明確にし、読みやすくし、Reactの宣言的な性質と一致するため、クラスコンポーネントやその他の州管理ソリューションよりも優れています。 1）UseStateを使用すると、状態変数を関数コンポーネントに直接宣言することができます。2）フックメカニズムの再レンダリング中に状態を覚えています。

UseState（）を使用する時期と、代替の州管理ソリューションを検討するタイミングApr 24, 2025 pm 04:49 PM

useUsestate（）forlocalcomponentStatemanagement; compleartinative forglogic、orperformanceissues.1）useidealforsimple、localstate.2）useglobalStateSolutionSolutionSuxorContextForSharedState.3）OptForreDuxtormobxobxobxobforexSt