Mustache和jq处理form表单的提交与绑定

冷不防 2022-08-08 16:54 169阅读 0赞

接着上一篇：[http://blog.csdn.net/joyhen/article/details/48623807][http_blog.csdn.net_joyhen_article_details_48623807]

之前说过Mustache的渲染比较单一，但是单一的好处是只干一件事，不会暴露或影响其它逻辑。此篇谈一谈html的表单和后端交互处理。其实这样的框架太多，我个人感觉都是比较大（大也是一步步发展过来的）的，轮子越来越臃肿，为毛，因为它要干越来越多的事，职责越大所包含的模块越多，这是不可避免的。我喜欢那些单一化的小库，它们短小精悍，且非常稳定（比如underscore、parseuri），且调试起来非常容易。不扯多，下面看看前后端的交互。

一般情况下，ajax一个表单内容（或者没有form），需要手动处理页面的输入元素，提取需要提交的部分，当然，这样的js库github上很多的。这里我用下面的方式（它来源github，我略作了修改，其实我js是个渣）

[https://github.com/vlin/jquery.serializeJSON/blob/master/jquery.serializeJSON.js][https_github.com_vlin_jquery.serializeJSON_blob_master_jquery.serializeJSON.js]

or :[ https://github.com/search?l=JavaScript&q=serializeJSON&type=Repositories&utf8=%E2%9C%93][https_github.com_search_l_JavaScript_q_serializeJSON_type_Repositories_utf8_E2_9C_93]

; (function ($) {
        'use strict';
        $.fn.serializeJSON = function () {
            var json = {};
            $.each(this.find('input,select,textarea'), function (i) {
                var el = $(this),
                  key = el.attr('name'),
                  val = el.val();
    
                if (val != '' && val !== undefined && val !== null) {
                    if (el.is(':checkbox')) {
                        el.prop('checked') && ($.isArray(json[key]) ? json[key].push(val) : json[key] = [val]);
                    } else if (el.is(':radio')) {
                        el.prop('checked') && (json[key] = val);
                    } else if (el.is('input[type="reset"]') || el.is(':button')) {
    
                    } else {
                        json[key] = val;
                    }
                }
            });
    
            return json;
        };
    })(jQuery);

这样就能便捷的将表单内容转成json对象进行ajax提交了。反过来，ajax过来的json数据可以用Mustache来渲染

var paramdata = {
             action: "addrole",
             arg: $('#myform').serializeJSON()
        };

这样就ok了，这里可以将所有的模板放到单独的文件夹中（或者文件中），在系统初始化之后的一个空暇时间段可以一次性渲染或者读取。可以全局搁置（注意全局对象的无侵入性处理）。

关于后端对ajax已post或get方式提交过来的参数解析问题，可以做一个统一的方法，这里不说了，下节详细说明设计。

[http_blog.csdn.net_joyhen_article_details_48623807]: http://blog.csdn.net/joyhen/article/details/48623807
[https_github.com_vlin_jquery.serializeJSON_blob_master_jquery.serializeJSON.js]: https://github.com/vlin/jquery.serializeJSON/blob/master/jquery.serializeJSON.js
[https_github.com_search_l_JavaScript_q_serializeJSON_type_Repositories_utf8_E2_9C_93]: https://github.com/search?l=JavaScript&q=serializeJSON&type=Repositories&utf8=%E2%9C%93