将表单数据转换为 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)
         });
     })

将表单数据转换为 JSON

Converting form data to JSON

javascript

jquery

json

stringify