如何通過使用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對象的字符串！