Framework7 表单数据存取

最新推荐文章于 2021-05-28 12:57:09 发布

@航空母舰

最新推荐文章于 2021-05-28 12:57:09 发布

阅读量446

点赞数

分类专栏： javascript 文章标签： json

本文链接：https://blog.csdn.net/hudeyong926/article/details/99540685

版权

javascript 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

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

var myApp = new Framework7();
var $$ = Framework7.$;

$$('.form-to-json').on('click', function(){
    var formData = myApp.formToJSON('#my-form');
    alert(JSON.stringify(formData));
});

每一个输入框都应该有 name 属性，否则不会被转换到JSON中去

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

var myApp = new Framework7();
var $$ = Framework7.$;

$$('.form-from-json').on('click', function(){
    var formData = {
        'name': 'John',
        'email': 'john@doe.com',
        'gender': 'female',
        'switch': ['yes'],
        'slider': 10
    }
    myApp.formFromJSON('#my-form', formData);
});

Ajax 表单提交

Framework7 可以通过ajax自动提交

有两种自动提交方式:

当用户提交了表单 (点击了提交按钮) 或者当通过代码触发了 "submit" 事件
当用户更改了表单的内容，或者当通过代码触发了 "change" 事件

submit时提交表单数据

只需要添加 "ajax-submit" class 在form上，当submit时就会自动通过ajax发送表单数据

<form action="send-here.html" method="GET" class="ajax-submit">
    ...
</form>

当表单数据改变时提交数据

很多时候我们在表单中没有使用 "submit" 按钮，这种情况下我们需要当表单有任何数据改变的时候就提交数据。这种情况我们需要使用 "ajax-submit-onchange" class:

<form action="send-here.html" method="GET" class="ajax-submit-onchange">
    ...
</form>

当用户改变了任何表单输入数据时，表单的数据就会自动通过ajax发送。

var app = new Framework7();
var $$ = Dom7;

app.request.get('blog-post.php', { foo:'bar', id:5 }, function (data) {
    $$('.articles').html(data);
    console.log('Load was performed');
});

Framework7自带的矢量图库太少，推荐用阿里妈妈MUX倾力打造的矢量图标库 iconfont，使用方法官网有介绍。完全定制化的矢量图标库，优点是节约空间，只加用到的，缺点后期维护，如果丢失了的库文件存档，就不好新增新的图标了