单击JSP中的Div

时间:2015-09-29 10:07:54

标签: html jsp servlets click

我一直在搜索,我找不到与以下问题相关的任何信息......

我有一个JSP文件,通过cid in div,我想调用一个Servlet的doPost方法。 div用作按钮。我会贴上一张图片,这样你就可以更好地理解我正在尝试的东西。

http://s29.postimg.org/95d9an5sn/Sin_t_tulo_2.png

div有一个悬停的css代码,使其变为蓝色,每个单元格都是不同的div。我想要的是通过单击每个单元格,可以调用Servlet doPost方法。

非常感谢。

编辑:

plans.jsp:

<%@page import="controller.wizard.classes.Plan"%>
<%@page import="java.util.ArrayList"%>
<%@page import="controller.Configuracion"%>
<%@ 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">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" href="<%=Configuracion.getInstance().getRoot()%>css/style.css" type="text/css">
    <script type="text/javascript" src="<%=Configuracion.getInstance().getRoot()%>js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="<%=Configuracion.getInstance().getRoot()%>js/ajax.js"></script>
    <title>Welcome</title>
    <script>
        function transferCallToServlet()
        {
            document.requestForm.action = "/cargar_plan";
            document.requestForm.submit();
        }
    </script>
</head>
<body>

    <jsp:include page="/common/header.jsp" />
    <jsp:include page="/common/userHeader.jsp" />
    <div class="marginNavbarUser"></div>
    <div class = "contentWrapper white">
        <div id="body">

            <h1>PLANES DE ORDENACIÓN INDUSTRIAL PARCIAL</h1>
            <% ArrayList<Plan> planes = (ArrayList<Plan>)request.getSession().getAttribute("planes"); 

            for(int i = 0; i < planes.size(); i++){%>
                <form name="requestForm" method="POST">
                    <div class="planWrapper" onclick="transferCallToServlet()">
                        <h2><%=planes.get(i).getDenominacion().toUpperCase() %></h2>
                        <p><%=planes.get(i).getNombre_sector() %> (#<%=planes.get(i).getNumero_sector() %>)</p>
                        <table>
                          <tr>
                            <td><p><%=planes.get(i).getMunicipio() %></p></td>
                          </tr>
                          <tr>
                            <td><p>Fase #<%=planes.get(i).getFase() %></p></td>
                            <td><p>Creación: <%=planes.get(i).getFechaCreacion() %></p></td>
                          </tr>
                          <tr>
                            <td><p><%=planes.get(i).getIdioma() %></p></td>
                            <td><p>Última modificación: <%=planes.get(i).getFechaUltimaModificacion() %></p></td>
                          </tr>
                        </table>
                    </div>
                </form>
            <%}%>





        </div>
    </div>
    <jsp:include page="/common/footer.jsp" />

</body>

CargarPlan.java

package controller.plan;

import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import controller.errores.SQLError;
import controller.wizard.classes.Plan;
import model.Dao;

/**
 * Servlet implementation class CargarPlan
 */
@WebServlet("/cargar_plan")
public class CargarPlan extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#HttpServlet()
 */
public CargarPlan() {
    super();
    // TODO Auto-generated constructor stub
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    try {


        HttpSession sesion = request.getSession();

        int id = Integer.parseInt(request.getParameter("id"));

        Dao dao = new Dao();

        Plan plan = dao.getWizard().getPlan(id);

        sesion.setAttribute("plan", plan);

        request.getRequestDispatcher("/user_area/plan.jsp").forward(request, response);

        System.out.println(id);

    } catch (SQLException e) {
        SQLError error = new SQLError(request, response, e);
    }


}

}

1 个答案:

答案 0 :(得分:2)

你可以通过javascript的一些帮助来做到这一点。 首先,您需要编写一个javascript函数,通过提交表单将您的请求重定向到servlet。 见这个例子 的 test.jsp的

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function transferCallToServlet(i)
{
document.requestForm.action = "myServlet";
document.requestForm.download.value=i;
document.requestForm.submit();

}
</script>
</head>
<body>
<form name="requestForm" method="get">
<input type="hidden" name="download" >
<% for(int i=0;i<6;i++){ %>
<div style="background-color: black;width=10px;height: 100px" onclick="transferCallToServlet(<%=i %>)" >
</div>
<br>
<%} %>

</form>
</body>
</html>

<强> myServlet.java

....
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("Hii In the servlet");
    }

当你点击那个div时,它会调用servlet的doPost方法(在这个例子中是myServlet)&#34;。

请注意 - 如果你想在url中使用该属性,你需要在post中更改方法以便在提交表单后获取,在url中你可以看到它。或者你保留它的帖子,你可以使用{{}在服务器上访问它1}}。