javascript 外部文件获取后台变量

简介:

Java Web中,js外部文件如何获取后台的变量呢?

项目使用spring MVC框架,

IDE:eclipse;

使用maven构建

控制器(OsTypeController.Java)如下:

Java代码   收藏代码
  1. package com.ct.web.controller;  
  2.   
  3. import java.util.Date;  
  4. import java.util.List;  
  5.   
  6. import org.springframework.beans.factory.annotation.Autowired;  
  7. import org.springframework.stereotype.Controller;  
  8. import org.springframework.ui.Model;  
  9. import org.springframework.web.bind.annotation.RequestMapping;  
  10. import org.springframework.web.bind.annotation.SessionAttributes;  
  11.   
  12. import com.ct.dao.OsTypeDao;  
  13. import com.ct.entity.OsType;  
  14. import com.time.util.TimeHWUtil;  
  15.   
  16. @Controller  
  17. @RequestMapping("/osType")  
  18. @SessionAttributes("practiceWay")  
  19. public class OsTypeController {  
  20.   
  21.     private OsTypeDao osTypeDao;  
  22.     private String redirectViewAll="redirect:/osType/viewAll";  
  23.       
  24.       
  25.     @RequestMapping(value = "/add")  
  26.     public String addInputOsType(String practiceWay,Model model){  
  27.         model.addAttribute("practiceWay", practiceWay);  
  28.         System.out.println("practiceWay:"+practiceWay);  
  29.         return "osType/addOSType";  
  30.     }  
  31.       
  32.     /******************************************************************/  
  33.     public OsTypeDao getOsTypeDao() {  
  34.         return osTypeDao;  
  35.     }  
  36.     @Autowired  
  37.     public void setOsTypeDao(OsTypeDao osTypeDao) {  
  38.         this.osTypeDao = osTypeDao;  
  39.     }  
  40.       
  41.       
  42. }  

 控制器方法addInputOsType 对应的页面(addOSType.jsp)如下:

Html代码   收藏代码
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  3.     pageEncoding="UTF-8"%>  
  4. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
  5. <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>  
  6. <%  
  7.     String path = request.getContextPath();  
  8.     String basePath = request.getScheme() + "://"  
  9.             + request.getServerName() + ":" + request.getServerPort()  
  10.             + path + "/";  
  11. %>  
  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  13. <html xmlns="http://www.w3.org/1999/xhtml">  
  14. <head>  
  15. <base href="<%=basePath%>">  
  16.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  17.     <title>Insert title here</title> <script type="text/javascript"  
  18.         src="<%=path%>/static/js/Module.js"></script>  
  19.     <script type="text/javascript" src="<%=path%>/static/js/common_util.js"></script>  
  20.     <script type="text/javascript" src="<%=path%>/static/js/test.js"></script>  
  21.       
  22. </head>  
  23. <body>  
  24.     <center>  
  25.     <h1><span id="titleSpan">add </span> </h1>  
  26.     <input type="hidden" value="${sessionScope.practiceWay}" name="hidpracticeWay" />  
  27.     <a href="javascript:history.go(-1)" >return </a>&nbsp;|&nbsp;  
  28.     <a href="index.jsp" >index</a>&nbsp;|&nbsp;<a href="osType/viewAll">view all</a>  
  29.         <form action="osType/save" name="inputform" >  
  30.             <table>  
  31.                 <tr>  
  32.                     <td>os name:</td>  
  33.                     <td><input type="text" name="name" /></td>  
  34.                 </tr>  
  35.                 <tr>  
  36.                     <td colspan="2" ><input type="submit"  
  37.                         value="&nbsp;&nbsp;o&nbsp;k&nbsp;&nbsp;" id="submit_btn" /></td>  
  38.                 </tr>  
  39.             </table>  
  40.             <div id="hidden_div"></div>  
  41.         </form>  
  42.     </center>  
  43. </body>  
  44. </html>  

 其中外部js文件(test.js)如下:

Js代码   收藏代码
  1. alert("111:${sessionScope.practiceWay}");  
  2. window.onload =function a()  
  3. {  
  4.     alert("method:a");  
  5.     alert("444:${sessionScope.practiceWay}");  
  6.     alert("hid:"+document.getElementsByName("hidpracticeWay")[0].value);  
  7. };  

 在浏览器中输入http://localhost:8088/demo_channel_terminal/osType/add?practiceWay=random

运行结果:

 

对应的是外部js文件(test.js)的执行结果。

所以我们可以得出结论:

在外部js文件获取后台变量的方式就是通过获取页面隐藏域的值

具体步骤:

(1)把后台变量设置到页面隐藏域中,例如

Java代码   收藏代码
  1. <input type="hidden" value="${sessionScope.practiceWay}" name="hidpracticeWay" />  

 (2)在外部js文件中获取隐藏域的值,例如

Java代码   收藏代码
  1. alert("hid:"+document.getElementsByName("hidpracticeWay")[0].value);  

那么在jsp页面中的js代码中如何获取后台变量的值呢?

请参阅我的下一篇日志 

相关文章
|
5月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
2月前
|
JavaScript 前端开发
JS如何处理后台时间
JS如何处理后台时间
|
4月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
3月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
49 0
|
4月前
|
JavaScript 前端开发
JavaScript基础知识-变量的声明提前
关于JavaScript变量声明提前特性的基础知识介绍。
51 0
JavaScript基础知识-变量的声明提前
|
2月前
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
|
2月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
2月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
2月前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
2月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
50 1