• js和jsp之间相互传值


    JSP 页面通常嵌入 JS 代码,且 JS、JSP之间需要相互使用一些变量的值,但JSP代码在服务器运行、JS代码在客户端浏览器运行,所以涉及到JS和JSP值传递问题。其交互方式如下:

    1.JS使用JSP中的变量

    <%
        String test = "I am testing !"; // JSP片段中定义变量
    %>
    
    <SCRIPT LANGUAGE = "JavaScript" >
        var tmp = "<%=test %>"; // 通过 "<%=javaCode %>" 引用jsp中的变量、方法等,注意:一定要加双引号
        alert(tmp);
    </SCRIPT >
    

     

     2.JSP使用JS中的变量

      由于JSP代码在服务器运行,无法直接使用客户端的JS代码中的变量。需先把客户端的变量提交到服务器,服务器再接收该变量。

    案例如下:将a.jsp页面JS代码段的变量提交到服务器,JSP片段再获取该变量。

    -- 以下是JSP中HTML代码,用于将JS中变量存储到隐藏控件中

     

    <!-- 在form中设置隐藏控件,用来存储JS中的值 -->
    <form name="frmApp" action="a.jsp" id="frmAppId" mothed="post"/>
       <input id="test" type="hidden" name="test">
    </form>
    

    -- 以下是JSP中JS代码,通过表单将提交本页面(隐藏控件将被提交到服务器)

    <script language="javascript">
        function setItemValue(){
            var tmp = "testing";
            document.getElementById("test").value = tmp;  // 将JS变量值存储到隐藏控件中
        }
     
        function submit(){
            var frm = document.getElementById("frmAppId"); // 获取表单
            frm.submit(); // 对表单进行提交
        }
    </script>
    

     -- 以下是a.jsp中在表单进行提交后,对变量进行接收的代码

    <%
        String test = request.getParameter("test"); // test为隐藏控件名
    %>
    

    注意:通过提交form形式使得JSP能够使用JS变量会刷新本页面,在页面不需要保持状态情况下可以考虑使用。否则,可以通过Ajax进行异步通信。

    参考原文:https://www.cnblogs.com/chenyongjun/p/3541842.html  

  • 相关阅读:
    Linux下截图工具
    Vue学习——router路由的实现原理
    Vue学习——vue的双向数据绑定原理
    JavaScript学习——面向对象(一)——创建对象(工厂模式和构造器模式)
    子组件给父组件的传值
    Vue组件
    JavaScript学习——事件对象Event
    JavaScript学习——事件处理程序
    JavaScript技巧——轮播图
    javascript——let关键字
  • 原文地址:https://www.cnblogs.com/wang-jx/p/12327547.html
Copyright © 2020-2023  润新知