将表单数据转换为 JSON 的最佳方法

Question

我必须将数据格式转换为 JSON 格式才能发送到 webAPI。

我有一个从 page1 调用的弹出表单：

<form id="popupForm" method="post" class="form-horizontal" action="">
<div class="form-group">
    <label class="col-sm-4 control-label" for="Nome">Nome</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Nome" name="Nome" placeholder="Nome" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Cognome">Cognome</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Cognome" name="Cognome" placeholder="Cognome" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Operatore">Operatore</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Operatore" name="Operatore" placeholder="Operatore" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Username">Username</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Username" name="Username" placeholder="Username" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Password">Password</label>
    <div class="col-sm-5">
        <input type="password" class="form-control" id="Password" name="Password" placeholder="Password" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="GruppoDiLavoro">Gruppo Di Lavoro</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="GruppoDiLavoro" name="GruppoDiLavoro" placeholder="GruppoDiLavoro" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="ProfiloFunzionalità">Profilo Funzionalità</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="ProfiloFunzionalità" name="ProfiloFunzionalità" placeholder="ProfiloFunzionalità" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="LivelloDiAccesso">Livello Di Accesso</label>
    <div class="col-sm-5">
        <select class="form-control" id="LivelloDiAccesso" name="LivelloDiAccesso" placeholder="LivelloDiAccesso">
            @*http://formvalidation.io/examples/bootstrap-combobox/*@
            <option value="1">Consultazione</option>
            <option value="2">Ispettore 1° livello</option>
            <option value="3">Ispettore 2° livello</option>
            <option value="4">Tecnico</option>
            <option value="5">Amministratore</option>
        </select>
     </div>
</div>
<div class="form-group">
    <div class="col-sm-5 col-sm-offset-4">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="Attivo" name="Attivo" />Attivo
            </label>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="DataCreazione">Data Creazione</label>
    <div class="col-sm-5">
        <input type="date" class="form-control" id="DataCreazione" name="DataCreazione" placeholder="DataCreazione" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="DataScadenza">Data Scadenza</label>
    <div class="col-sm-5">
        <input type="date" class="form-control" id="DataScadenza" name="DataScadenza" placeholder="DataScadenza" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Mail">Mail</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Mail" name="Mail" placeholder="Mail" />
    </div>
</div>
<div class="form-group">
    <div class="col-sm-9 col-sm-offset-4">
        <button type="submit" class="btn btn-primary" name="Save" value="Save">Save</button>
    </div>
</div>

page1 有这个代码：

            function OpenPopup(pageUrl) {
            //alert(localStorage.getItem("UtenteIndex"));
            var $pageContent = $('<div/>');
            //$pageContent.load(pageUrl);
            $pageContent.load(pageUrl, function () {
                $('#popupForm', $pageContent).removeData('validator');
                $('#popupForm', $pageContent).removeData('unobtrusiveValidation');
                $.validator.unobtrusive.parse('form');

            });
            $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                .html($pageContent)
                .dialog({
                    draggable: true,
                    autoOpen: false,
                    resizable: false,
                    model: true,
                    title: 'Edita Utente',
                    height: 650,
                    width: 900,
                    close: function () {
                        $dialog.dialog('destroy').remove();
                    }
                })


            $('.popupWindow').on('submit', '#popupForm', function (e) {
                var url = $('#popupForm')[0].action;
                //alert($('#popupForm').serialize())
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $('#popupForm').serialize,
                    success: function (data) {
                        if (data.status) {
                            $dialog.dialog('close');
                            oTable.ajax.reload();
                        }
                        alert(url);
                        alert(JSON.stringify(data));
                    },
                    error: function (xhr, status, error) {
                        $dialog.dialog('close');
                        alert(xhr.responseText);
                    }
                })

                e.preventDefault();
            })
            $dialog.dialog('open');
        }

输出 JSON 不正确。代码返回如下字符串：

!DOCTYPE html>\r\n\r\n\r\n meta http-equiv=\"Content-Type\" 内容=\"文本/html；字符集=utf-8\"/ \r\n \r\n
用户\r\n....

仅对输入数据进行字符串化的最佳方法是什么？ 我哪里错了？

Answer 1

我个人使用这个jquery sn-p：

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

它将您的表单序列化为一个对象，其中名称属性是属性，值是值，像这样使用它：

data = $('#myForm').serializeObject();

Answer 2

你有没有试过把你的功能：

$('.popupWindow').on('submit', '#popupForm', function (e) .....

在这行之后？

$dialog.dialog('open');

我认为在你调用 $dialog.dialog('open'); 之后你的弹出窗口的 HTML 被添加到了 DOM 中

因此，与弹出窗口的标记相关的每个事件都需要在添加到 DOM 后进行连接