如何在JavaScript中使用JSP标签

        面对“古老”的项目,延续其生命并发挥最大价值,是件很苦逼的事儿。如何在JS中使用JSP标签?如何使ES6模板字符串 含有 JSP标签、EL表达式、JS变量 正常识别?如何解决JSP的EL表达式和 ES6模板字符串 语法冲突?本文将遇到的几处难点做梳理、并结合实际案例深入剖析。

目录

1、简述

1.1、JSP EL表达式

1.2、JavaScript ES6模板字符串

2、案例剖析

2.1、JavaScript脚本命名

2.2、配置文件后缀名映射

2.3、JS脚本中插入JSP标签

2.4、JSP中引入自定义JS脚本

3、实践总结


运行环境:

  • Windows-7-Ultimate-x64、Windows-10-BusinessEditions-21h2-x64、CentOS-7.9.2009-x64
  • OracleJDK-1.8_u201
  • IntelliJ IDEA Community Edition 2022.2.2
  • Maven-3.6.3

1、简述

        本案例为Java项目,基础架构Spring MVC,使用到的技术点有:JSP EL表达式、ES6模板字符串、JSP标签等。

1.1、JSP EL表达式

        ELExpression Language)在JSP中访问模型对象是通过EL表达式的语法来表达。

变量:${ 变量名 }
运算:${ not empty 变量名 ? 变量名 : "默认值" }

1.2、JavaScript ES6模板字符串

        传统的 JavaScript 语言,输出模板通常是 字符串 与 变量 拼接而成,可能涉及到转义,写法相当繁琐不便,而使用 ES6 模板字符串 (反单引号 ` )完美解决这个问题。如下:

let unitPrice = 1.68;

// 传统写法
alert('
单价:' + unitPrice + '
'); // 模板字符串,换行、空格、缩进均会保留 alert(`
单价:${unitPrice}
`);

2、案例剖析

        如何在JavaScript中使用JSP标签,以下将进行详细剖析。

2.1、JavaScript脚本命名

        通常,JavaScript脚本文件命名为  XXX.js,而要使 JSP引擎 也能解析JS中的JSP代码,首先需将文件后缀名改为 XXX.jsp

        本案例 客制化JS脚本 为跟 标准的 JSP文件 区分,特命名为 XXX.js.jsp,如: 含有JSP标签的JS脚本.js.jsp。 

2.2、配置文件后缀名映射

        为使JSP引擎正常解释JS脚本的JSP标签,需要在项目根目录的 《xxx-gateway/src/main/webapp/WEB-INF/web.xml》中配置servlet-mapping,对包含JSP代码的 JS脚本文件做映射(注:允许使用通配符进行模糊匹配)。如下:



	Admin Web

	
	
		webAppRootKey
		admin-gateway
	
	
	
        isLog4jAutoInitializationDisabled
        true
    

    
        jsp
        *.jsp
        
        /static/js/含有JSP标签的JS脚本.js.jsp
    

	
	
	
		500
		/WEB-INF/views/error/500.jsp
	
	
		404
		/WEB-INF/views/error/404.jsp
	

2.3、JS脚本中使用JSP标签

主要包含以下技术点:

  • JSP渲染前,需要先进行字符集声明,避免出现中文乱码;
  • JS脚本中,导入JSP自定义标签库;
  • JS脚本中 ES6模板字符串 含有 JSP标签、EL表达式、JS变量 混合嵌套时,将JS变量作为参数传入 JSP标签 内部调用,需要用 ${'${JS变量名}'} 格式;

含有JSP标签的JS脚本.js.jsp》脚本文件内容如下:

<%-- 指定页面字符集:解决 JavaScript 文件中使用 ES6模板字符串 渲染页面时乱码 --%>
<%@ page contentType="text/javascript;charset=UTF-8" %>
<%-- 导入JSP自定义标签库:解决 JavaScript 文件中使用 ES6模板字符串 无法解析JSP标签 --%>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>

// TODO 此处省略1万字

// ES6模板字符串 含有 JSP标签、EL表达式、JS变量
let userNo = '123456';
console.log(``);

// TODO 此处省略1万字

注意:

1、在 JSP文件中使用 ${} 会被优先当作 EL表达式,而不是 JS ES6模板字符串;

2、JSP标签中如果含 HTML字符串值拼接,需要使用 单引号 ' 替代,否则 ES6模板字符串 解析后,会报字符串拼接异常;

2.4、JSP中引入自定义JS脚本

        用户访问的JSP页面文件内容,如下:



JS脚本中插入JSP标签Demo




正文

3、实践总结

本案例中遇到的技术点,最终是由逆向倒推法一步步的处理,费了不少工夫。如下:

  • JSP引擎解析 JS脚本
  • 解析后的 JS 脚本乱码
  • 如何让 JS 正常识别 JSP标签
  • ES6 模板字符串 插入 JS变量
  • JSP EL表达式 和 JS ES6模板字符串 语法冲突解决

附录:

  • JSP EL表达式 和 ES6模板字符串 语法冲突解决
  • 在 JavaScript 中使用 JSP 代码
  • 模板字符串 - ECMAScript 6 - 百度百科
  • 变量 - EL表达式 - 百度百科
  • JSTL - 百度百科

希望能帮助到码友们,如遇到其他问题,欢迎留言、讨论……

你可能感兴趣的:(Java,jsp,tag,jsp标签,ES6模板字符串,EL表达式,语法冲突)