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代码中如何获取后台变量的值呢?

请参阅我的下一篇日志 

相关文章
|
14天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
18 1
|
19天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
21 0
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
21 0
|
1月前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
11天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
1天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
8 3
|
1天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
5天前
|
存储 JavaScript 前端开发
js的变量以及运算
js的变量以及运算
11 1
|
5天前
|
JavaScript 前端开发
关于js变量
关于js变量
15 1