博客项目--隐藏域的使用（暂存目标数据的id信息）

隐藏域个人理解：有那么一块我们看不见但是又可以存放数据的地儿。

应用领域：

页面中删除某个数据，弹出提示框【“确认要删除这条数据吗？” 确定删除取消】

点击“确定删除”之后就可以删除这条数据，点击取消则关闭弹窗，不进行删除操作

点击“删除”的瞬间，将删除对应的数据id存到这个弹窗中

点击“确定”后就将这个id作为请求参数发送到删除信息的路由，路由再根据传来的id值进行删除

（弹窗其实是一个form表单，隐藏域就是置于这个表单中的input用于存储所需的数据）

给每个数据后面的“删除”添加类名‘delete’；

给弹窗中的【隐藏域（input）】设置id值'hideID'；

给隐藏域（input）设置自定义属性data-id用于存储需要传递到路由中去的数据的id

给隐藏域（input）设置type属性为hidden

弹窗内置form表单代码如下：

<form class="modal-content" action='/admin/article-delete' method="get"><div class="modal-header"><button type="button" class="close" ><span>&times;</span></button></div><div class="modal-body"><p>您确定要删除这篇文章吗?</p><!--建立隐藏域--><input type="hidden" name="id" id="hideID"></div><div class="modal-footer"><button type="button" class="btn btn-default" >取消</button><input type="submit" class="btn btn-primary" value="确定删除"></div>
</form>

将数据id存放到隐藏域中的脚本代码这样写⬇：

注意：获取自定义属性使用.attr()，JQuery语法中设置value值使用val()进行赋值。

<script>$('.delete').on('click',function(){//获取到存储在删除按钮中的数据idvar id=$(this).attr('data-id');//将数据id存放到隐藏域中，隐藏域通过表单进行数据传递$('#hideID').val(id);})
</script>

博客项目--隐藏域的使用（暂存目标数据的id信息）相关推荐

最新后盾网Laravel框架重入门到实战 Laravel博客项目实战陈华主讲包含课件源码
老师介绍陈华,PHP明星讲师,大学生演讲网创始人,2010年开始开发整站项目,精通Laravel,Yii框架. 简介本套课程是一套以项目实战为主的Laravel5.2实战开发教程,是真正意义上的 ...
从0到1编写个人博客项目使用springboot+vue(前后端分离) 到购买服务器上传项目到 GitHub开源项目、此过程下所遇问题及解决方法，至少你帮你少走70%弯路
个人博客编写后记 2022.12.2.4 : 30.此项目告一段落. 编撰此博客本意里除去对找工作的帮助.更多地是想帮助未走过的人去探探路.总结经验.少走弯路.知识的宝贵不在于无价.而是无私.天 ...
码神之路博客项目构建记录
个人博客项目 Blog 一.项目搭建(2021.10.6) pom文件导入相关依赖 application配置文件配置 Mybatis Plus配置跨域问题解决二.首页配置首页分页显示文章信息 ...
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（七）
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(七) 转载于:https://github.com/Meowv/Blog 上一篇完成了后台分类模块的所有功能 ...
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（三）
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三) 转载于:https://github.com/Meowv/Blog 上一篇完成了博客的主题切换,菜单和 ...
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（二）
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(二) 转载于:https://github.com/Meowv/Blog 上一篇搭建了 Blazor 项目并 ...
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（三）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(三) 转载于:https://github.com/Meowv/Blog 上篇文章完成了分类和标签页面相关的共6个接 ...
基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射
基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射转载于:https://github.com/Meowv/Blog 本篇紧接着来玩一下AutoM ...
基于 abp vNext 和 .NET Core 开发博客项目 - 再说Swagger，分组、描述、小绿锁
基于 abp vNext 和 .NET Core 开发博客项目 - 再说Swagger,分组.描述.小绿锁 https://github.com/Meowv/Blog 在开始本篇正文之前,解决一个 @ ...

博客项目--隐藏域的使用（暂存目标数据的id信息）

博客项目--隐藏域的使用（暂存目标数据的id信息）相关推荐

最新文章

热门文章