Clever Geek Handbook

フォームからオブジェクトを取得

挑戦する



JavaScriptを使用して、フォームデータを含むオブジェクトを取得します。 一連のフィールドとプロパティは、フォームのマークアップで指定する必要があります。 理由-json、xmlをこのオブジェクトから取得するために、いくつのアプリケーションが見つかるかわかりません。



解決策



ここでそれを取ります： code.google.com/p/form2js github.com/maxatwork/form2js



使用する



結果のオブジェクトの構造は、name属性から取得されます。 表記はCastle.MonorailおよびASP.Mvcに似ています。

はい、以下の例はJSONに似たものを示しています。 そのため、ライブラリは JSONでシリアル化されません 。 この例では、シリアル化ライブラリwww.json.org/js.htmlが使用されました。

作業の結果は、文字列ではなく、フォームデータを含むJavascriptオブジェクト （以下の行をeval



することで取得できます）です。 明らかに、このオブジェクトからJSON表現を取得できますが、これはライブラリのメインタスクではありません。



オブジェクト/ネストされたオブジェクト






  1. < 入力 タイプ = "text" name = "person.name.first" value = "John" />
  2. < 入力 タイプ = "text" name = "person.name.last" value = "Doe" />
*このソースコードは、 ソースコードハイライターで強調表示されました。




出力で与える







  1. {
  2. 「人」 ：
  3. {
  4. 「名前」 ：
  5. {
  6. "first" ： "John" 、
  7. "last" ： "Doe"
  8. }
  9. }
  10. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




配列






  1. < label > < input type = "checkbox" name = "person.favFood []" value = "steak" checked = "checked" />ステーキ</ label >
  2. < label > < 入力 タイプ = "checkbox" name = "person.favFood []" value = "pizza" />ピザ</ label >
  3. < label > < input type = "checkbox" name = "person.favFood []" value = "chicken" checked = "checked" />チキン</ label >
*このソースコードは、 ソースコードハイライターで強調表示されました。




出力で与える







  1. {
  2. 「人」 ：
  3. {
  4. "favFood" ：[ "ステーキ" 、 "チキン" ]
  5. }
  6. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




オブジェクトの配列






  1. < dl >
  2. < dt > 5人の友人の名前とメールアドレスをお知らせください</ dt >
  3. < dd >
  4. < label >メール< 入力 タイプ = "text" name = "person.friends [0] .email" value = "agent.smith@example.com" /> </ label >
  5. < label >名前< input type = "text" name = "person.friends [0] .name" value = "Smith Agent" /> </ label >
  6. </ dd >
  7. < dd >
  8. < label >メール< 入力 タイプ = "text" name = "person.friends [1] .email" value = "n3o@example.com" /> </ label >
  9. < label >名前< 入力 タイプ = "text" name = "person.friends [1] .name" value = "Thomas A. Anderson" /> </ label >
  10. </ dd >
  11. </ dt >
  12. </ dl >
*このソースコードは、 ソースコードハイライターで強調表示されました。




出力で与える







  1. {
  2. 「人」 ：
  3. {
  4. 「友達」 ：[
  5. { 「メール」 ： 「agent.smith@example.com」 、 「名前」 ： 「スミスエージェント」 }、
  6. { "email" ： "n3o@example.com" 、 "name" ： "Thomas A. Anderson" }
  7. ]
  8. }
  9. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




jQueryの.serializeArray（）との違い



非常に人気のある質問。

.serializeArray()



は、オブジェクトの配列を使用した例から次のようなオブジェクトを作成します。





  1. [
  2. { "person.friends [0] .email" ： "agent.smith@example.com" }、
  3. { "person.friends [0] .name" ： "スミスエージェント" }、
  4. { "person.friends [1] .email" ： "n3o@example.com" }、
  5. { "person.friends [1] .name" ： "Thomas A. Anderson" }
  6. ]
*このソースコードは、 ソースコードハイライターで強調表示されました。




違いは明らかです。



おわりに



必要な場合は、（MIT）を使用してください。おそらく、多くのバグがあります。空き時間に応じて編集します。



UPD：ソースをhgで埋めました。 同時に、ここで作業の例を見ることができます： form2js.googlecode.com/hg/example/test.html


More articles:


All Articles