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

来源：互联网发布：人工智能etf 编辑：程序博客网时间：2024/05/16 01:19

接着上一篇：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

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方式提交过来的参数解析问题，可以做一个统一的方法，这里不说了，下节详细说明设计。

1 0