产品增加

“添加商品”按钮事件

<div class="layui-card-header"><button class="layui-btn" onclick="xadmin.open('添加商品','/html/product/product-add.html',600,400)"><iclass="layui-icon"></i>添加</button>
</div>

修改添加商品页面表单
导入添加商品页面js

添加页面表单设置文件上传功能

<!--product-add.html--><button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list"><img class="layui-upload-img" id="demo1" width="200" height="200"><p id="demoText"></p>
</div>

//product-add.jslet uploadInst = upload.render({elem: '#test1', url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。, before: function (obj) {//预读本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('#demo1').attr('src', result); //图片链接（base64）});}, done: function (res) {//如果上传失败if (res.code > 0) {return layer.msg('上传失败');}//上传成功的一些操作console.log(res);sessionStorage.setItem("imgHref", res.data);//……$('#demoText').html(''); //置空上传失败的状态}
});

通过单行选择框录入产品类型

html设置select标签

<div class="layui-input-block" style="width: 200px" ><select id="type_id" name="type_id" lay-filter="typeName" ><option value=""></option></select>
</div>

js通过ajax、for循环和 .html 进行传值赋值

function findAllType() {$.ajax({url: '/back/product_type/findall',data: {enable: 1},type: 'get',dataType: 'json',success: function (res) {console.log(res.data);//    将得到的值赋给下拉菜单setTypeData(res.data);},})
}function setTypeData(data) {let html = '';for (let i = 0; i < data.length; i++) {html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'}$("#type_id").html(html)form.render();
}

监听添加表单的 “新增” 按钮
```
form.on('submit(add)',function(data){}
```
通过ajax将获取到的表单数据传递给servlet
1. 获取前面上传的文件的名称（路径）并赋值给表单数据对应字段
  
  在上传文件时将文件名称上传至 sessionStorage
  
  ajax传值时从sessionStorage取值
```
data.img = sessionStorage.getItem("imgHref");
```
2. 获取单行选择框中选中数据的value值并赋值给表单数据
```
let typeId = document.getElementById("type_id");
let type_id = typeId.options[typeId.selectedIndex].value;
data.type_id = type_id;
```
关闭表单页面并刷新列表

二〇二三-三-二十九相关推荐

二〇二三-三-二十七
用户新增.修改.删除删除操作实现删除逻辑: 点击删除按钮需要对其进行监听对于重要信息删除应该给用户提示通过ajax调用后台更具后台传回的信息进行逻辑处理新增表单监听提交按钮将值传给后台 ...
二〇二三-三-二十三
问题描述: 前一天因为原项目服务器问题,无法访问部分servlet,遂将原项目代码全部复制到了一个新的maven空项目中,成功解决部分servlet无法访问(404)以及实例化问题. 但是启动tomc ...
二〇二三-三-十七——反射
反射的三种实现方式 Class<?> aClass1 = Class.forname(model.StudentModel); //最常使用括号里全限定名包名+类名选中文件,ctr ...
二〇二三-三-三十一
关闭ajax异步 $.ajax({url:'',data:'',type:'',async:false, //关闭ajax异步dataType:'',success:function(res){} } ...
第三百一十九节，Django框架，文件上传
第三百一十九节,Django框架,文件上传 1.自定义上传[推荐] 请求对象.FILES.get()获取上传文件的对象上传对象.name获取上传文件名称上传对象.chunks()获取上传数据包,字 ...
JavaScript 编程精解中文第三版十九、项目：像素艺术编辑器
十九.项目:像素艺术编辑器原文:Project: A Pixel Art Editor 译者:飞龙协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分参考了<JavaScript ...
二〇二三·二·十五——日报
知识点: margin: 两个参数情况下,(上下),(左右) 四个参数情况下:(上),(右),(下),(左) 使用转义字符在html里插入字符: 空格 > 大于 > < 小于 & ...
二〇二三·二·十七——日报
前端知识点产品页面,留言页面,地图页面溢出换行 form表单:一般情况下,只要出现用户输入,并且可以进行提交数据的时候,用form表单边框设置虚线 border:dashed div的cont ...
（二十九 ~ 三十一）巴菲特与索罗斯的投资习惯：投资习惯
作者:chen_h 微信号 & QQ:862251340 微信公众号:coderpai (一)巴菲特与索罗斯的投资习惯:思考习惯的力量 (二)巴菲特与索罗斯的投资习惯:七种致命的投资信念 (三 ...

二〇二三-三-二十九

产品增加

二〇二三-三-二十九相关推荐

最新文章

热门文章