前端开发记录小记

小编 2026-07-05 阅读:891 评论:0
目录   1.自定义jstl标签 问题描述: 1.1 编写tld文件 1.2 配置web.xml 1.3 具体使用 2.html的自定义属性 问题描述 2.1 任意自定义 2.2 绑定对...

目录

 

1.自定义jstl标签

问题描述:

1.1 编写tld文件

1.2 配置web.xml

1.3 具体使用

2.html的自定义属性

问题描述

2.1 任意自定义

2.2 绑定对象


1.自定义jstl标签

问题描述:

在使用jsp进行开发的时候,jstl标签的使用可以极大的提升开发效率。有一个需求是需要在<c:forEach>中对每一个循环的结果记录进行java对象转换成json字符串。然后将字符串复制给一个a标签的自定义属性上,然后再在js中获取并操作。这个对象是一个java对象,不能直接在js中操作,也无法通过JSON.stringify进行转换,因为目标参数要求的是js对象。这种情况下,我们就可以使用自定义jstl标签。我们的目标是将对象转换成json字符串。

1.1 编写tld文件

文件名为:mobai-el-common.tld

<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<taglib xmlns=\"http://java.sun.com/xml/ns/javaee\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"
        xsi:schemaLocation=\"http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd\" version=\"2.1\">

    <tlib-version>1.0</tlib-version>
    <short-name>el</short-name>
    <!-- 将对象format成json字符串 -->
    <function>
        <name>toJsonString</name>

        <function-class>com.tydic.emoitor.utils.CommTool</function-class>
        <function-signature>String toJsonString(java.lang.Object)</function-signature>

        <description>将对象format成json字符串</description>
        <example>${el:toJsonString(value)}</example>
    </function>
</taglib>

将tld文件放置到WEB-INF/tld目录下,CommTool中的toJsonString方法就不再写了,就是java把对象转换为json的普通代码。

1.2 配置web.xml

web.xml中,在和filter同级下新增taglib的配置说明,代码如下:

<jsp-config>
		<taglib>
			<!-- 配置标签的引用地址 JSP页面中引用时使用-->
			<taglib-uri>mobai.com/el-common</taglib-uri>
			<!-- 配置标签的TLD文件地址 -->
			<taglib-location>/WEB-INF/tld/mobai-el-common.tld</taglib-location>
		</taglib>
</jsp-config>

1.3 具体使用

在需要用的地方,直接使用:

${el:toJsonString(item.sub_list)}

这就搞定了。

2.html的自定义属性

问题描述

有时候,我会想把更多的数据捆绑到dom元素上,当进行其他操作时候,不用重新请求后端接口,而是直接使用这些元素,例如:查询列表的以及详情展示,我希望在列表中的一个记录,点击详情的时候,直接展示详情,而不用再重新请求接口。这时候就可以使用html的自定义属性。

2.1 任意自定义

给a标签添加aflag的标签

<a href=\"javascript:toDetail();\" aflag=\'\'></a>

当点击a标签的时候,我们使用如下代码获取aflag里的内容:

$(this).attr(\'aflag\');

获取到的内容是字符串,转换成js对象尽情的使用吧。

2.2 绑定对象

我们想绑定复杂对象怎么办?我们可以在js中直接拼接html代码,对a标签的aflag让其直接等于js对象,但是你会发现通过attr取出来的内容是不能用的。这时候就涉及到对象、字符串的互转了。

通过下面方式进行将js对象转换给json字符串。

var str = JSON.stringify(data) ;//对象json字符串
var data = eval(\'(\' + str + \')\');//字符串转对象
var data = JSON.parse(data); //字符串转对象

将js对象转换成json字符串,切记:

在给a标签拼接aflag的时候,要注意双引号和单引号,默认情况下,属性都是双引号,但是aflag要使用单引号,例如:

function getAdom(data){
    var str = JSON.JSON.stringify(data);
    var rstr = \'<a href=\"xxx.html\" class=\"dem\" aflag=\'+\"\'\"+str+\"\'\"+\'></a>\';
    return rstr;
}

这里进行拼接时候,很容易出错,要注意。

 

版权声明

本文仅代表作者观点,不代表百度立场。
本文系作者授权百度百家发表,未经许可,不得转载。

热门文章
  • Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering

    Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering
    Problem Statement 我们考虑一个具有马尔可夫性质、非线性、非高斯的状态空间模型(State Space Model):对于一个时间序列上的观测结果{yt,t∈N}\\{ y_t , t \\in N \\}{yt​,t∈N},我们认为每个观测结果yty_tyt​的生成依赖于一个无法直接观察的隐变量xt∈{xt,t∈N}x_t \\in \\{x_t , t \\in N \\}xt​∈{xt​,t∈N},即:p(...
  • 机房智能化温湿度解决方式之POE供电以太网温湿度传感器

    机房智能化温湿度解决方式之POE供电以太网温湿度传感器
    机房智能化温湿度解决方式之POE供电以太网温湿度传感器 北京盈创力和电子科技有限公司 智能型TCP网口温湿度记录仪 北京IP网络温湿度记录仪厂家,北京盈创力和 北京智能型TCP网口温湿度记录仪IP网络温湿度记录仪是一种新型的基于TCP/IP协议双绞线以太网标准温湿度采集模块,利用它可以实现现场温度值、相对湿度值的采集,同时利用其自身的RJ45通信接口可以方便地和机房监控主机或交换机集线器进行联网。 工作于-40℃~85℃工业级带...
  • Hive 系统函数及示例

    Hive 系统函数及示例
    查看所有系统函数 show functions; 函数分类 内置函数【系统函数】 数学函数: floor、round、ceil、cos、log2等 字符串函数: length、reverse、trim、lower、get_json_object、repeat等 收集函数: size 转换函数: cast 日期函数: year、month、datediff、date、date_add等 条件函数: coalesce、case…w...
  • HTTP状态保持的原理

    HTTP状态保持的原理
    a)在用户登录之后,浏览器返回响应的时候会在响应中添加上cookieb)浏览器接收到cookie之后会自动保存c)当用户再次请求同一服务器中的其他网页的时候,浏览器会自动带上之前保存的cookied)服务接收到请求之后可以请 request 对象中取到cookie 判断当前用户是否登录  Http是无状态的,就是连接时数据互通,关闭后...
  • CSRF的原理和防范措施

    CSRF的原理和防范措施
    a)攻击原理:i.用户C访问正常网站A时进行登录,浏览器保存A的cookieii.用户C再访问攻击网站B,网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交,传指定的参数iii.而攻击网站B在访问网站A的时候,浏览器会自动带上网站A的cookieiv.所以网站A在接收到请求之后可判断当前用户是登录状态,所以...
标签列表