將表單數據轉換為 JSON

Question

我正在構建一個搜索表單，我想使用搜索字段的 JSON 格式來調用使用 AJAX 的通用 Web 處理程序。 我目前的挑戰是 - 我正在使用以下表單代碼：

<form id="frmSearch" class="was-validated" method="post">
            <div class="row mb-4">
                <div class="col-lg-2 offset-lg-1 text-end">Find companies where...</div>
                <div class="col-lg-2 text-start">
                    <select ID="ddlType" Class="form-control rounded" required>
                        <option value="" selected>Search by...</option>
                        <option value="company_name">Company Name</option>
                        <option value="city">City</option>
                        <option value="federal_ein">EIN</option>
                        <option value="state">State</option>
                    </select>
                </div>
                <div class="col-lg-1 text-center">contains...</div>
                <div class="col-lg-4 d-flex">
                    <input type="text" ID="tbTerm" class="form-control rounded text-black" required />
                </div>
                <div class="col-lg-1 mx-auto">
                    <input type="submit" ID="btnSearch" class="btn-success btn text-white" text="search" />
                </div>
            </div>
        </form>

然后，使用我在 SO 上找到的示例，我使用 jQuery 將表單字段格式化為 JSON，如下所示：

            $(function () {
                $('#frmSearch').submit(function () {
                    alert('got here');
                    var txt = JSON.stringify($('#frmSearch').serializeObject());
                    alert(txt)
                });
            })

問題是，警報觸發了，所以我知道代碼正在執行，除了 Stringify 靜默失敗，第二個警報永遠不會觸發。 我在控制台中沒有任何錯誤。 關於為什么會發生這種情況的任何幫助？

Answer 1

我從來沒有使用過jquery，但是谷歌搜索和個人知識我想出了這個。

 $(function () {
              $('#frmSearch').submit(function (event) {
                event.preventDefault();
                object= {}
                formData = new FormData(event.target);
                formData.forEach((value, key) => object[key] = value);
                alert('got here');
                var txt = JSON.stringify(object);
                alert(txt)
              })
 });

我希望我能幫助你！ 問候。

Answer 2

   <form id="frmSearch" onsubmit='return onSubmit(this)'>...</form>

     function onSubmit(form){
       var data = JSON.stringify( $(form).serializeArray() );
       alert( data );
       return false; //to test : prevent submiting
     }

或使用 jquery：

     $(function () {
        $('#frmSearch').submit(function () {
         var txt = JSON.stringify($('#frmSearch').serializeArray());
         alert(txt)
         });
     })