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

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

我有一个叫做“从第1页开始”的弹出表单：

<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>

诺姆
同源的
操作员
用户名
密码
格拉波迪拉沃罗酒店
普罗菲洛·福齐奥纳利特酒店
阿塞索生活酒店
@*http://formvalidation.io/examples/bootstrap-combobox/*@
领事馆
Ispettore 1°livello
Ispettore 2°livello
Tecnico
阿米尼斯特拉托
阿提沃
数据Creazione
斯加登扎数据
邮寄
拯救

第1页有以下代码：

            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');
        }

函数OpenPopup（pageUrl）{
//警报（localStorage.getItem（“UteneIndex”）；
变量$pageContent=$（''）；
//$pageContent.load（pageUrl）；
$pageContent.load（pageUrl，函数（）{
$（'popupForm'，$pageContent）.removeData（'validator'）；
$（'popupForm'，$pageContent）.removeData（'unobtrusiveValidation'）；
$.validator.unobtrusive.parse（'form'）；
});
$dialog=$（''）
.html（$pageContent）
.对话({
真的，
自动打开：错误，
可调整大小：false，
模型：对，
标题：“Edita Utente”，
身高：650，
宽度：900，
关闭：函数（）{
$dialog.dialog（'destroy'）.remove（）；
}
})
$（'.popupindow'）。关于（'submit'，'#popupForm'，函数（e）{
var url=$（'#popupForm'）[0]。操作；
//警报（$（'#popupForm'）.serialize（））
$.ajax({
类型：“POST”，
url:url，
数据：$（'#popupForm'）。序列化，
成功：功能（数据）{
if（数据状态）{
$dialog.dialog（'close'）；
重载（）；
}
警报（url）；
警报（JSON.stringify（数据））；
},
错误：函数（xhr、状态、错误）{
$dialog.dialog（'close'）；
警报（xhr.responseText）；
}
})
e、 预防默认值（）；
})
$dialog.dialog（'open'）；
}

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

!！DOCTYPE html>\r\n\r\n\r\n meta http EQUID=\“内容类型” content=\“text/html；charset=utf-8\”/\r\n\r\n
Utenti\r\n

仅字符串化输入数据的最佳方法是什么？

---

我错在哪里？

我个人使用这个jquery片段：

$.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();

---

就我个人而言，我使用这个jquery代码片段：

$.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();

---

您是否尝试将您的功能：

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

在这条线之后

$dialog.dialog('open');

我认为在调用$dialog.dialog（'open'）之后，弹出窗口的HTML被添加到DOM中

---

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

您是否尝试过将函数：

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

在这条线之后

$dialog.dialog('open');

我认为在调用$dialog.dialog（'open'）之后，弹出窗口的HTML被添加到DOM中

---

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

否，您需要提醒调用响应，而不是发送给它的数据，您还需要服务器以json响应，但我认为你的问题是如何序列化表单以正确发送我的问题是如何序列化表单以正确发送。如果我在弹出式窗体中使用您（和我的）函数，一切都可以。如果我在第1页上使用，然后用“$（'#popupForm'）.serialize”调用，结果是不对的。不，你提醒调用的响应，而不是你发送给它的数据，你需要你的服务器也用json响应，但我想你的问题是如何序列化表单以正确发送。我的问题是如何序列化表单以正确发送。如果我在弹出式窗体中使用您（和我的）函数，一切都可以。如果我在第1页上使用，然后用“$（'#popupForm'）.serialize”调用，则结果不正确。