关于get表单的前端解决方案

浏览:610 发布日期:2017/04/24 分类:技术分享 关键字: get表单 参数丢失
关于get表单提交参数的问题已经老生常谈了,如果个别用到可以用隐藏域(<input type="hidden" name="key" value="xxx">)解决url参数问题,但是频繁使用的话代码不美观而且重复工作,现在分享个个人的解决方案,利用js挂全局get表单submit钩子实现get表单参数不丢失,有相关问题的可以考虑使用此类方法。
首先
需要用到的插件:
jquery:https://github.com/jquery/jquery/releases
jurlp(jQuery URL parser):https://github.com/tombonner/jurlp
其次
实现我们的全局get表单submit钩子
$(function () {
    // 注册全局get表单钩子,解决get表单参数丢失
    $('form').on('submit', function () {
        var $this = $(this),
            method = $this.prop('method').toLowerCase();
        if (method == 'get') {
            var target = $this.prop('target'),
                action = $this.prop('action'),
                formData = $this.serialize(),
                removeKeys = $this.data('remove-keys'),
                uri = $.jurlp(action).query(formData);
            if (removeKeys) {
                removeKeys = removeKeys.split(',');
                var query = uri.query();
                $.each(removeKeys, function (i, item) {
                    delete query[item];
                });
                uri.query('').query(query);
            }
            target = target ? target : '_self';
            open(uri.href, target);
            return false;
        }
    });
});
这样就可以使get表单提交不丢失参数了,如果希望表单的某个字段不挂载在url上可以在form上增加属性data-remove-keys=""属性移除此参数,比如不希望test和token的隐藏域值提交到url参数可以这样实现<form method="get" data-remove-keys="test,token">
    <input type="text" name="product_name">
    <input type="hidden" name="test" value="123">
    <input type="hidden" name="token" value="456">
</form>
支持url hash,如果未指定action默认action为当前url。
写给需要此方面需求的人。
最佳答案
评论( 相关
后面还有条评论,点击查看>>