如何通过使用jQuery/JavaScript的

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对象，表单字段中不包含的对象 - 他们是空白的（“”）。我在代码中遗漏了什么，我必须实现我想要的功能，即将表单字段的名称/值对作为创建的JSON对象的一部分包含在内？

Answer 1

This Works。请尝试。

var formData = {}; 
 

 
$('#signinForm').find('input').each(function() { 
 
    formData[this.id] = 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" 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>

Answer 2

尽量去除双点

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

而且在你的HTML例如没有名称输入项目，虽然你在这里使用它们

formData[this.name] = this.value; 

Answer 3

输入字段缺失的name属性属性

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>

Answer 4

我用一个小的jQuery辅助函数来正确地完成这（我发现了另一个StackOverflow的答案的答案，但实际上无法找到原来的问题引用为你）

辅助函数

我把下面的代码在一个单独的JavaScript文件的辅助，使其GLO巴利在我的应用程序

$.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. { “公司”： “”， “地址1”： “”， “地址2”： “”， “城市”： “”， “邮编”： “”， “国家”： “” }

我认为主要的问题是你的'form'被声明为div，其次我不太确定你的JSON.stringify语法是否正确。

上面的方法制造的，其余夹紧在web服务，然后解析成Newstonsoft JObject与

JObject jData = JObject.Parse（jsonString）完全形成JSON对象;

其中jsonString是从我的Ajax调用

希望帮助通过JSON对象的字符串！