將表單數據轉換爲對象

我不想將數據發佈到服務器我想將它傳遞到需要對象的客戶端函數中。什麼是最好的方式來做到這一點？將表單數據轉換爲對象

2011-09-09 fancy

您能否詳細說明/添加一些上下文？ –

看看這個問題 - http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery – ipr101

*「我想將它傳遞到一個客戶端函數，它需要一個json對象。「*我會給你10：1的可能性，而不是你想要將它傳遞給接受** JavaScript **對象的客戶端函數。 JSON純粹是一種文本符號;當你實際上與事物交互時，它們是JavaScript對象，與JSON無關。現在，如果你的客戶端函數接受一個字符串，並期望該字符串包含JSON編碼的數據，它將進行反序列化和處理，然後道歉。 :-)但我懷疑不是。 –

如果您使用的是jQuery，您可能需要查看它提供的.serializeArray()函數，因爲它可以在一次調用中完成所有功能。使用TJ's example;

<script type="text/javascript"> 
    $(function() { 
     $('form[name="f1"]').submit(function() { 
      var person = $(this).serializeArray(); 
      // Do what you will with 'person' now... 
     }); 
    }); 
</script> 
<form name="f1"> 
    <input type="text" name="firstname" /> 
    <input type="text" name="lastname" /> 
    <input type="submit" value="Submit" /> 
</form>

這樣，您不必手動構建對象併爲每個字段聲明一個屬性，這有助於避免人爲錯誤。

如果由於某種原因，您不想使用jQuery，那麼您總是可以使用look at the code來查看所使用的邏輯並創建您自己的功能。

來源

2011-09-09 10:11:56 Alasdair

hrrm，這並不完美。它的結果是這個字符串'email = test％40example.com＆password = 1234'我的目標是擁有'{email：'[email protected]'，密碼：'1234'} @Alasdair – fancy

@fancy哎呀！我錯誤地使用了錯誤的功能。請參閱我對答案所做的更改。基本上，使用'.serializeArray（）'而不是'.serialize（）'。這將爲每個字段提供一個包含具有'name'和'value'屬性的對象的數組。如果你想要一個帶名稱/值映射的對象（很可能），你可能希望創建一個額外的函數：http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery/1186309 ＃1186309 – Alasdair

謝謝，使用該職位的解決方案工作 – fancy

您可以直接創建自己的對象，例如：

<form name='f1'> 

<input type='text' name='firstname' /> 
<input type='text' name='lastname' /> 

</form> 

window.onload = function() 
{ 
    var Person = 
    { 
     'FirstName' : document.f1.firstname.value, 
     'LastName' : document.f1.lastname.value 
    } 
}

一個JSON object只是一個普通的Javascript對象，因爲JSON是的Javascript的子集。

來源

2011-09-09 09:29:54 TJHeuvel

+1具體來說，***沒有***「JSON對象」。只有對象的JSON表示。這與JSON沒有任何關係。 –

@TJ不可能是更真實的，並且最初你到達那裏;） – TJHeuvel

'@TJHeuvel：'是的，你也是。 :-) –

將表單數據轉換爲對象

回答

相關問題