移动端安卓和IOS开发框架Framework7教程-表单数据

Form 转化成 JSON

使用 app 对应的方法可以非常方便把所有的表单元素转化成一个 JSON 对象:

myApp.formToJSON(form) - 把表单转换成JSON对象

• form - HTML元素 or 字符串 (CSS选择器)
• 返回一个JSON对象

1. <form?id="my-form"?class="list-block">
2. ??<ul>
3. ????<li>
4. ??????<div?class="item-content">
5. ????????<div?class="item-inner">
6. ??????????<div?class="item-title?label">Name</div>
7. ??????????<div?class="item-input">
8. ????????????<input?type="text"?name="name"?placeholder="Your?name">
9. ??????????</div>
10. ????????</div>
11. ??????</div>
12. ????</li>
13. ????...?other?form?fields
14. ??</ul>
15. </form>
16. ?
17. <div?class="content-block">
18. ??<a?href="#"?class="button?form-to-json">Get?Form?Data</a>
19. </div>

?

1. var?myApp?=?new?Framework7();??
2. ?
3. var?$$?=?Framework7.$;
4. ?
5. $$(‘.form-to-json‘).on(‘click‘,?function(){
6. ??var?formData?=?myApp.formToJSON(‘#my-form‘);
7. ??alert(JSON.stringify(formData));
8. });

JSON 填充到 Form

使用 app 对应的方法我们很容易把一个JSON对象填充到 form 中去：

myApp.formFromJSON(form, formData) - 把一个JSON对象填充到Form中

• form - HTML元素 或者 字符串 (CSS选择器)
• formData - 对象 需要填充进表单的JSON对象

1. <form?id="my-form"?class="list-block">
2. ??<ul>
3. ????<li>
4. ??????<div?class="item-content">
5. ????????<div?class="item-inner">
6. ??????????<div?class="item-title?label">Name</div>
7. ??????????<div?class="item-input">
8. ????????????<input?type="text"?name="name"?placeholder="Your?name">
9. ??????????</div>
10. ????????</div>
11. ??????</div>
12. ????</li>
13. ????...?other?form?fields
14. ??</ul>
15. </form>
16. ?
17. <div?class="content-block">
18. ??<a?href="#"?class="button?form-from-json">Fill?Up?Form</a>
19. </div>

1. var?myApp?=?new?Framework7();??
2. ?
3. var?$$?=?Framework7.$;
4. ?
5. $$(‘.form-from-json‘).on(‘click‘,?function(){
6. ?
7. ??var?formData?=?{
8. ????‘name‘:?‘John‘,
9. ????‘email‘:?‘[email?protected]?*/"?_ue_custom_node_="true">‘,
10. ????‘gender‘:?‘female‘,
11. ????‘switch‘:?[‘yes‘],
12. ????‘slider‘:?10
13. }
14. ??myApp.formFromJSON(‘#my-form‘,?formData);
15. });

实例预览

?

移动端安卓和IOS开发框架Framework7教程-表单数据

原文：http://zaixianshouce.iteye.com/blog/2306479