Question

我有一个ASP.NET WebForms应用程序的表单，如下所示：

<div id="signinForm">
    <div class="form-inline form-group-sm">
        <div class="input-group">
            <label for="MemberName" class="sr-only">Email Address :</label>
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input type="email" required id="MemberName" placeholder="Email Address" class="form-control">
        </div>
        <div class="input-group">
            <label for="Password" class="sr-only">Password :</label>
            <input type="password" required id="Password" placeholder="Password" class="form-control">
        </div>
        <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button>
    </div>
</div>

我想从表单字段构建一个JSON对象以传递给Web服务，现在我正在使用它：

            var formData = {};
            $(signinForm).find(':input').each(function () {
                formData[this.name] = this.value;
            });

            var json = JSON.stringify({ NewMember: formData });

如果我检查构建的JSON对象，表单字段不包含在对象中 - 它们是空白的（＆＃34;＆＃34;）。我在代码中缺少什么，我必须实现我想要的，包括表单字段的名称/值对作为创建的JSON对象的一部分？

Answer 1

这有效。请尝试。

＆＃13;

var formData = {};

$('#signinForm').find('input').each(function() {
  formData[this.id] = this.value;
});

var json = JSON.stringify({ NewMember: formData });

console.log(json);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="signinForm">
<div class="form-inline form-group-sm">
    <div class="input-group">
        <label for="MemberName" class="sr-only">Email Address :</label>
        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
        <input type="email" required id="MemberName" placeholder="Email Address" class="form-control">
    </div>
    <div class="input-group">
        <label for="Password" class="sr-only">Password :</label>
        <input type="password" required id="Password" placeholder="Password" class="form-control">
    </div>
    <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button>
</div>
</div>

＆＃13;

Answer 2

我使用了一个小的jQuery帮助函数来完成这个（我在另一个StackOverflow答案中找到答案，但实际上找不到原始问题来为你引用它）

辅助功能

我将以下代码放在一个单独的javascript帮助文件中，以使其在我的应用程序中全局可用

$.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;
};

实际表单本身被声明为：

<form id="frmShippingAccount" class="form-inline shipping-account-form" action="#">
    <input type="text" name="Name" />
</form>

然后，在我的表单的保存按钮的点击操作内...

var shippingAccountForm = JSON.stringify($("#frmShippingAccount").serializeObject());

serializeObject函数将获取我的表单中的每个元素，并将Name属性作为属性名称推送到JSON对象，并将相应的值作为值。

E.g。 { ＆＃34;公司＆＃34;：＆＃34;＆＃34 ;, ＆＃34;地址1＆＃34;：＆＃34;＆＃34 ;, ＆＃34;地址2＆＃34;：＆＃34;＆＃34 ;, ＆＃34;市＆＃34;：＆＃34;＆＃34 ;, ＆＃34;邮编及＃34;：＆＃34;＆＃34 ;, ＆＃34;国家＆＃34;：＆＃34;＆＃34; }

我认为主要问题是你的表格＆＃39;声明为div，其次我不太确定你的JSON.stringify语法是否正确。

上面的方法创建了一个完美形成的JSON对象，我把它放在一个Web服务上，然后用

解析成一个Newstonsoft JObject。

JObject jData = JObject.Parse（jsonString）;

其中jsonString是从我的ajax调用传递的JSON对象的字符串

希望有所帮助！

Answer 3

尝试删除双重点

$(signinForm).find('input').each(function () {

你的html示例中的输入项目也没有名称属性，尽管你在这里使用它们

 formData[this.name] = this.value;

Answer 4

输入字段缺少名称属性

var formData = {};
$(signinForm).find('input[name]').each(function () {
  formData[this.name] = this.value;
});

var json = JSON.stringify({ NewMember: formData });

console.log(json)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="signinForm">
    <div class="form-inline form-group-sm">
        <div class="input-group">
            <label for="MemberName" class="sr-only">Email Address :</label>
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input type="email" name="email" required id="MemberName" placeholder="Email Address" class="form-control">
        </div>
        <div class="input-group">
            <label for="Password" class="sr-only">Password :</label>
            <input type="password" required id="Password" placeholder="Password" class="form-control">
        </div>
        <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button>
    </div>
</div>

如何使用jQuery / Javascript迭代表单字段

4 个答案: