通过表单隐藏域向后台传值

简介: 通过表单隐藏域向后台传值

今天怂怂就为大家分享一篇在写毕设的时候遇到一个问题以及如何解决问题的,具有很好的参考价值,希望对大家有所帮助。一起跟随怂怂过来看看吧!


数据库使用数值存储权限(role)这个字段 。

3·2.jpg


由于项目需求,页面需显示具体权限角色名称;比如 role="0" 需显示成 “系统管理员 ”。


3·3.jpg



这是我的源码:

<c:if test="${bean.role==0}">
    <div class="unit">
        <label>权限:</label>
        <input type="text" name="role" size="30" value="系统管理员" readonly />
    </div>
</c:if>
复制代码


可是发现一个问题,当你在进行update操作的时候,value="系统管理员"也被一并传入数据库(如下图),这就不符合数据库字段的设计,肯定是会报异常;


网络异常,图片无法展示
|


如下有两种解决方案:


方案一:不推荐使用,比较笨的方法

通过对后端update接口处进行值的判断,再重新赋值的方式进行提交,若是角色分配过多,就容易造成代码冗余!


User bean = userDao.selectUser(id);

   if(request.getParameter("role")=="系统管理员" || request.getParameter("role").equals("系统管理员")) {

       bean.role="0";

}


方案二:通过input隐藏域传值【推荐使用】

【隐藏域】隐藏域是指在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

代码实现:

<c:if test="${bean.role==0}">

   <div class="unit">

       <label>权限:</label>  

       <input type="text" size="30" value="系统管理员" readonly />

       <input  name="role" value="0" type="hidden"/> //通过隐藏域把value="0"传到后台

   </div>

</c:if>


解释一下:第一个input框只是用作效果显示而不会被提交到后台中,起着关键作用的就是name属性;


name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据,也就是你后端通过 request.getParameter(" 参数"),其中的参数也就是你 name 的属性值(图上:name="role")。


注意:一旦使用隐藏域绑定role的value值,在修改role的同时,表单提交到后端,role值还是以隐藏域绑定的value值提交,所以,像权限(role)修改操作,就不言而喻了!切记!!

 

--------------------------------拓展---------------------------------

1、<input> 标签的 name 属性

定义和用法

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。

注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。


语法

<input name="value">


2、HTML DOM Hidden 对象

Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。

这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话,就是用这种类型的元素。

在 HTML 表单中 <input type="hidden"> 标签每出现一次,一个 Hidden 对象就会被创建。

您可通过遍历表单的 elements[] 数组来访问某个隐藏输入域,或者通过使用document.getElementById()。


Hidden 对象的属性

3·1.PNG

 



目录
相关文章
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
提交表单与验证表单案例
提交表单与验证表单案例
51 0
|
6月前
uniapp进行表单效验
uniapp进行表单效验
356 0
|
5月前
|
Python
表单
【6月更文挑战第3天】表单。
27 1
|
6月前
|
移动开发 前端开发 JavaScript
Vue3中表单相关的知识:表单绑定、表单验证、表单处理
Vue3中表单相关的知识:表单绑定、表单验证、表单处理
253 0
|
6月前
|
JavaScript 前端开发
Javascript的form表单校验输入框
Javascript的form表单校验输入框
48 0
|
前端开发
61EasyUI 表单 - 创建异步提交表单
61EasyUI 表单 - 创建异步提交表单
42 0
|
小程序 API
form表单组件
form表单组件
173 0
|
设计模式 JavaScript 数据库
表单防止重复提交的四种方式
表单防止重复提交的四种方式
266 0
|
移动开发 前端开发 HTML5
前端表单部分新属性
前端表单部分新属性
97 0
|
JavaScript 前端开发
自动提交表单的实现方法
可以解决采集需要自动提交的问题!   方法一:   Untitled Document (1)自动提交表单:    setTimeout("document.form1.submit()",10000)                      10秒后提交。
2480 0