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

接着上一篇：http://blog.youkuaiyun.com/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

or : 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来渲染

    <script id="template" type="x-tmpl-mustache">
        <tr>
            <td class="td_right">角色名：</td>
            <td class="">
                <input type="text" id="txtname" name="name" class="input-text lh30 pl5" size="40" value="{{roleName}}">
            </td>
        </tr>
        <tr>
            <td class="td_right">标记码：</td>
            <td><input type="text" name="tag" class="input-text lh30 pl5" size="40" readonly="readonly" value="{{roleTag}}" ></td>
        </tr>
        <tr>
            <td class="td_right">角色状态：</td>
            <td class="" style="text-align:left;">
                <input type="radio" name="state" value="1" {{#state}}checked="checked"{{/state}}>
                可用
                <input type="radio" name="state" value="0" {{^state}}checked="checked"{{/state}}>
                不可用
            </td>
        </tr>
        <tr>
            <td class="td_right">角色描述：</td>
            <td class="">
                <textarea id="desc" name="desc" cols="30" rows="10" class="textarea pl5">{{description}}</textarea>
            </td>
        </tr>
        <tr>
            <td class="td_right"> </td>
            <td class="">
                <input type="button" class="btn btn82 btn_save2" value="添加">
                <input type="reset" class="btn btn82 btn_res" value="重置">
            </td>
        </tr>
    </script>
    <script type="text/javascript">
        function loadData(jsondata) {
            var template = $('#template').html();
            parent.Mustache.parse(template);
            var rendered = parent.Mustache.render(template, jsondata);
            $('#targettable').html(rendered);
        }

        $(function () {
            var myurl = parseUri(location.href);
            if (myurl.queryKey.id) {
                var param = {
                    action: "getrole",
                    arg: {
                        id: myurl.queryKey.id
                    }
                };
                $.getJSON('../ajax/requestaction.aspx', { ajaxparam: JSON.stringify(param) }, function (result) {
                    if (result.success) {
                        loadData(result.data);
                    } else {
                       //...
                    }
                });
            }

            //...

        });
    </script>

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

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

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