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

问题
项目开发遇到一个问题，就是在提交到后台的时候遇到一个请求甲方数据，来实现在添加数据的时候，将请求到甲方的数据展示在前端页面，让甲方看到他到底添加了哪些数据。因此，使用到了双向绑定，来显示弹框中我们选中的数据库。
使用到技术
使用了bootstrap的模态框，和原生js的双向绑定还有第三方插件layer
代码片

 <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"></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');})}

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

用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue2 MVVM 双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html https://juejin.im/post/5b2f0769e51d45589f46949e ...
html5图片剪切板,原生js实现基于base64数据复制图片到剪切板，可以粘贴出图片，模拟浏览器复制功能。...
原生js实现基于base64数据复制图片到剪切板,可以粘贴出图片,模拟浏览器复制功能.前言: 初次发帖排版略丑,见谅.之前我们这边有个需求就是说,前端通过canvas截图然后, 点击一个按钮实现复制截 ...
table.render加入php传值,iView中Table通过render添加一个Input如何双向绑定数据
有一个Table: JS代码如下: export default { data(){ return { columns:[], data:[{name:11111,name2:'加工精度',value ...
JS实现双向绑定的几种方式
记录JS三种双向绑定 1.第一种是通过Proxy数据代理来达到双向绑定的,这是Vue3更新的双向绑定方式. <!DOCTYPE html> <html lang="en&q ...
原生JS实现网页烟花动画效果——前端工程师必备技能！
原生js实现放烟花效果,点击鼠标,然后向四周扩散,最后自由落体效果!最简单的方法实现! CSS代码: [html] view plain copy *{ padding: 0px; margin: 0 ...
vue3 antd项目实战——Form表单使用【v-model双向绑定数据，form表单嵌套input输入框、Radio单选框】
vue3 ant design vue项目实战--单选框(Radio)的使用以及Form表单的双向绑定知识调用(form表单的源代码附在文章最后) 场景复现实现需求 form表单整体架构的搭建 i ...
原生JS 获取自定义data-xxx 数据
最近在写js的时候遇到原生用js 获取自定义data 获取从数据库读取的数据调用其他js 渲染模型需要在循环的div 中自定义 data-image (可以自定义) <!-- 模型文件 ...

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

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

最新文章

热门文章