将JSP数据转换为JavaScript

时间:2015-10-12 06:20:25

标签: javascript jsp

我的JSP文件中的数据是从servlet中读取的。我需要在javascript中使用这些数据进行验证。如何在javascript中获取此数据。我已经尝试将此数据发送到javascript中的方法。但它不起作用。这是我的jsp文件。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page
    import="com.thbs.mis.common.bo.User,
    com.thbs.mis.common.config.RoleConstants,
    com.thbs.mis.common.bo.BusinessUnits,
    java.util.List,
        java.util.Iterator,
    java.util.ArrayList,java.util.Date"%>

<%@page
    import="com.thbs.mis.spotexcellenceaward.bo.SpotExcellenceAwardBO,
    com.thbs.mis.gsrreporthr.bo.GsrSlab"%>
    <%!List<GsrSlab> slabList = new ArrayList<GsrSlab>(); %> 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>View Spot Excellence Award</title>
<link href="/RMS/CSS/style.css" rel="stylesheet" type="text/css" />
<link href="/CSS/cal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SCRIPTS/calendar.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<script type="text/javascript" src="SCRIPTS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="SCRIPTS/jquery.autocomplete.js"></script>

<style type="text/css">
#coolmenu {
    width: 170px;
    background-color: #ffffff;
}

* html #coolmenu {
    /*IE only rule, to negate the padding below IE includes in menu width.*/
    width: 160;
}

#coolmenu a {
    font: bold 11px Verdana;
    padding: 2px;
    padding-left: 4px;
    display: block;
    width: 100%;
    color: #209C96;
    text-decoration: none;
    border-bottom: 1px dotted black;
}

html>body #coolmenu a { /*Non IE rule*/
    width: auto;
}

#coolmenu a:hover {
    background-color: #209C96;
    color: white;
}
</style>


<script src="SCRIPTS/common.js"></script>
<script type="text/javascript" src="SCRIPTS/autoCompleteV1.js"></script>
<script type="text/javascript" src="SCRIPTS/ajax.js"></script>

<script>
function myFunction() 
{

   var flag=true;
    var year = document.getElementById("year").options[document.getElementById("year").selectedIndex].text;
    var slab =document.getElementById("slab").options[document.getElementById("slab").selectedIndex].text;

    if(year==="-select year-" && slab==="-select slab-")
    {
        alert("Please select year and slab");
        flag=false;
    }
    if(year==="-select year-" && slab!=="-select slab-")
    {
        alert("Please select year");
        flag=false;
    }
    if(slab==="-select slab-" && year!=="-select year-")
    {
        alert("Please select slab");
        flag= false;
    }

    return flag;

}
</script>

</head>
<body>
    <jsp:include page="/header.jsp"></jsp:include>

    <%
        response.setHeader("Cache-Control", "no-cache"); //Forces caches 
        //to obtain a new copy of the page from the origin server
        response.setHeader("Cache-Control", "no-store"); //Directs caches 
        //not to store the page under any circumstance
        response.setDateHeader("Expires", 0); //Causes the proxy cache 
        //to see the page as "stale"
        response.setHeader("Pragma", "no-cache"); //HTTP 1.0 backward 
        //compatibility
            response.setHeader("Refresh", "1");
        final String USER = "user";
        final String LOGIN_PAGE = "/login.jsp";
        final int CDEC_HEAD_ID = 74;
        final int FINANCE_HEAD_ID = 552;
        final int UK_OPERATION_HEAD_ID = 115;
        final int QUALITY_HEAD_ID = 55694;
        final int SALES_AND_MARKETING_HEAD_ID = 130;
        final int CHINA_OPERATION_HEAD_ID = 1731;
        final int COE_BU_HEAD = 101;
        final int FINANACE_BU_HEAD = 23;
        final int NBU_FINANCE = 12;
        final int NBU_IT = 15;
        final int NBU_SHARED = 22;
        final int COMPETENCE_HEAD = 13;
        final RequestDispatcher rd = request
        .getRequestDispatcher(LOGIN_PAGE);
        User user = (User) session.getAttribute(USER);
        int empId = user.getEmpId();
        String id = String.valueOf(empId);
        if (user == null) {
            rd.forward(request, response);
        }
    %>

    <form method="post" action="GsrReportManager">
        <!-- name="grossMarginreportForm" id="exitEmpForm"
                        onsubmit="return isValidData();" -->
        <div class="mainalignment">

        <h3 align="left"><B><font color="teal">Create Slab</font></B></h3> 



    <table>
        <!--    <tr>
        <td colspan="2" style="font-weight: bold; font-size: 14px;">
            View Spot Excellence Awards</td>
        </tr> -->

        <tr align="center">
        <td>Year:</td>
        <td><select id="year" name="year">
<option value="-1" selected="selected">-select year-</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>

                                </select></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td>Slab:</td>
                                                <option value="-1" selected="selected">-select slab-</option>
<option value="H1">H1</option>
<option value="H2">H2</option>
</select></td>

</tr>
                            <tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<tr>
<td>&nbsp;</td>
<td align="left"><button value="Create" name="Create" onclick="return myFunction()">Create</button>
</tr>

</table></form>
<br><br>
<TABLE cellpadding="2" style=background-color: bgcolor="#d3d3d3" width="400px">
<TBODY>

<TR style="background-color: teal; color: white;">
<TD align="center" width="10px"><b>Year</b></TD>
<TD align="center" width="20px"><b>Rating Slab</b></TD>
</TR>
 <%
try{
slabList = (List)request.getAttribute("slabList");
for (Iterator itr = slabList.iterator(); itr.hasNext();) 
{
%>
 <tr><td align="center"><%
Object[] SlabBO = (Object[]) itr.next();
%><%=SlabBO[2] %></td><td align="center"><%=SlabBO[1] %></td></tr>
<% 
}
}
catch(Exception e)
{
e.printStackTrace();
}
%>
</TBODY>
</TABLE>

  </div>
</form>

</body>

</html>

JavaScript myFunction()是我需要静态jsp数据“slabList”的方法。

1 个答案:

答案 0 :(得分:0)

您的浏览器代码对JSP servlet一无所知,反之亦然。如果要在浏览器中使用数据,则需要在JSP servlet中输出数组初始化代码。 E.g:

<script>
function myFunction() 
{
 var slabList = [<% 
// output your data from slabList in a JSON format
 %>];

}

或者你可以创建一个REST api并使用Ajax动态加载数据,但我想这将是你的下一步。