原生js实现双向绑定数据，实现前端提交到后台

1. 问题
   项目开发遇到一个问题，就是在提交到后台的时候遇到一个请求甲方数据，来实现在添加数据的时候，将请求到甲方的数据展示在前端页面，让甲方看到他到底添加了哪些数据。因此，使用到了双向绑定，来显示弹框中我们选中的数据库。

2. 使用到技术
   使用了bootstrap的模态框，和原生js的双向绑定还有第三方插件layer

3. 代码片

 <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">商品列表：</label>
                <input id="goods" type="hidden" class="input-text" value=""  name="arr">

            <span>
                <!--<a href="javascript:;;" class="btn btn-primary radius" onclick="add_goods('添加商品（First)','{:url('apply/goods_list')}','4','900','510')" >-->
                    <!--<i class="Hui-iconfont">&#xe600;</i>添加商品-->
                <!--</a>-->
                <!-- Button trigger modal -->
            <!--<div>-->
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                添加商品
                </button>
                <div class="modal fade bs-example-modal-lg" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">添加商品</h4>
                        </div>
                        <div class="modal-body">
                    <table border="1" cellpadding="0" cellspacing="0" width="100%" class="table_index1" id="table_user_list">
                        <thead>
                <tr class="text-c">
                    <th width="25"><input type="checkbox" name="" value=""></th>
                    <th width="20">序号</th>
                    <th width="50">名称</th>
                    <th width="30">商品缩略图</th>
                    <th width="40">商品价格</th>
                </tr>
                </thead>
                <tbody>
                {volist name="goodes" id="vo"}
                <tr class="text-c" id="goods_id{$vo.goods_id}">
                    <td><input type="checkbox" goodname="{$vo.goods_name}" goodimg="{$vo.goods_image}" goodprc="{$vo.goods_price}"  data-key="{$key}" value="{$vo.goods_id}" name="checkbox"></td>
                    <td>{$vo.goods_id}</td>
                    <td>{$vo.goods_name}</td>
                    <td><img src="{$vo.goods_image}" style="width:60px; height:50px; border-radius:25px;"></td>
                    <td>{$vo.goods_price}</td>
                </tr>
                {/volist}
                </tbody>
                </table>
                        </div>
                        <div class="modal-footer" >
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary"   onclick="dataadd()"  value="">保存</button>
                        </div>
                        </div>
                    </div>
                </div>
            </span>
        </div>

      <div class="cl pd-30 bg-1 bk-gray mt-10" style="margin-left: 100px">
            <table class="table table-border table-bordered table-hover table-bg table-sort">
                <thead>
                <tr class="text-c">
                    <th width="20">序号</th>
                    <th width="50">名称</th>
                    <th width="30">商品缩略图</th>
                    <th width="40">商品价格</th>
                </tr>
                </thead>
                <tbody id="showthis">

                </tbody>
            </table>
        </div>

js内容

 //商品选择展示
    var gidbox = new Array();
    function getChecked(id) {
        var gids = new Array();
        // var indexs = new Array();
        $.each($('input[name="checkbox"]:checked'), function(i, n){
            gids.push( $(n).val() );
            gidbox.push({
                'goodsid':$(n).val(),
                'goodsname':$(n).attr('goodname'),
                'goodimg':$(n).attr('goodimg'),
                'goodprc':$(n).attr('goodprc')
            })
            // indexs.push($(n)[0].attributes[0].nodeValue);
        });
        $("#goods").val(gids);

        return gids;
    }
    function dataadd(kid){

        kid = kid ? kid : getChecked();
        kid = kid.toString();
        if(kid == ''){
            layer.msg('你没有选择任何选项！', {offset: 95,shift: 6});
            return false;
        }
        layer.confirm('确认要添加商品吗？',function(index){
            $.post("{:url('Apply/add_goods')}", {ids:kid}, function(data){
                if( data.status == 'ok' ){
                    for(var i=0;i<gidbox.length;i++){
                        // console.log(123);
                        $('#showthis').append(
                            '<tr class="text-c  check_data">',
                                '<td style="text-align:center">'+gidbox[i].goodsid+'</td>',
                                '<td style="text-align:center">'+gidbox[i].goodsname+'</td>',
                                '<td style="text-align:center"><img src="'+gidbox[i].goodimg+'" style="width:60px; height:50px; border-radius:25px;"></td>',
                                '<td style="text-align:center">'+gidbox[i].goodprc+'</td>',
                            '</tr>'
                    )
                    }
                    layer.msg(data.info,{icon:1,time:1000});

                }else{
                    layer.msg(data.info,{icon:1,time:1000});
                }
            },'json');
        })
    }