如何使用ajax

时间:2015-11-03 15:30:42

标签: ajax jsp servlets

我在我的程序中使用下拉列表,我使用ajax选择下拉列表值。 但问题是我无法将选定的下拉值传递给servlet,而servlet必须使用这些值。

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        HttpSession session = request.getSession(false);
        String username=(String)session.getAttribute("uname");
        String mnth = request.getParameter("mnth");
        String yr = request.getParameter("yr");
        String mnthyr = mnth+"-"+yr;
        PrintWriter out=response.getWriter();
        Gson g=new Gson();
        out.print(g.toJson(Dao.get_attendence_by_mnthyr(username, mnthyr)));
    }

}


<%@page import="db.Dao"%>
<%@page import="javaprocessors.Date" %>
<%@page import="java.sql.*" %>
<%@page import="beans.GetBeans" %>
<%@page import="java.sql.PreparedStatement" %>
<%@page import="com.google.gson.Gson" %>
<%@page import="db.Connect_db" %>
<%@page import="java.sql.Connection" %>
<%@ 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="resources/assets/css/table.css">
<title>Insert title here</title>
</head>
<body>

    <div class="CSS_Table_Example" style="width:925px;">

<table>
<thead>
                <tr> 

                    <td rowspan="1" colspan="9">

                <strong>Month</strong>

                <select size="1" id="chng" name="mnth">
                <option value="01">January</option>
                <option value="02">February</option>
                <option value="03">March</option>
                <option value="04">April</option>
                <option value="05">May</option>
                <option value="06">June</option>
                <option value="07">July</option>
                <option value="08">August</option>
                <option value="09">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
                </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <strong>Year</strong>

                <%HttpSession sesion = request.getSession(false);
                    String shft = null;
                    String username=null;
                    username=(String)session.getAttribute("uname");
                    for(GetBeans g: Dao.getshift(username)){
                    shft = g.getShift();
                    }%>
                <%ResultSet resultset =null;%>
                <% Connection connection=Connect_db.getConn();
                    Statement statement = connection.createStatement() ; 

                resultset =statement.executeQuery("SELECT DISTINCT YEAR(date) FROM tb_attendence WHERE emp_name LIKE '"+username+"';") ;%>  

                    <select size="1" id="chng" name="yr">
                    <% while(resultset.next()){ %> <option><%= resultset.getString(1)%></option> <% } %>

                </select>

                <button class="btn btn-primary" id="sbtn1">Go</button>
                <button type="submit" class="btn btn-default" id="sbtn2">Download   </button>

                </td>
                </tr>
                <tr>
                    <td >
                        Employee Name
                    </td>
                    <td>
                            Date
                    </td>
                    <td>
                            Duty Marked
                    </td>
                    <td>
                            Duty Attended
                    </td>
                    <td>
                            In Time
                    </td>
                    <td>
                            Out Time
                    </td>
                    <td>
                            In Time Latency
                    </td>
                </tr>
                </thead>
                    <tbody id="tbdy">

                <%sesion = request.getSession(false);
                username=(String)session.getAttribute("uname");
                String mnthyr = Date.getmnthyr();
                connection=Connect_db.getConn();

                String query="select emp_name,date,duty_marked,duty_attended,login,logout,latency from tb_attendence where emp_name like '"+username+"' and DATE_FORMAT(date, \"%m-%Y\") =\""+mnthyr+"\";";
                PreparedStatement ps=connection.prepareStatement(query);


                ResultSet rs=ps.executeQuery();%>
                <%while(rs.next()){ %>`enter code here`
                <tr>

                <td> <%= rs.getString(1) %></td>
                <td> <%= rs.getString(2) %></td>
                <td> <%= rs.getString(3) %></td>
                <td> <%= rs.getString(4) %></td>
                <td> <%= rs.getString(5) %></td>
                <td> <%= rs.getString(6) %></td>
                <td> <%= rs.getString(7) %></td>
            </tr>
            <% } 
            connection.close();%>

            </table>
            </div>
        </body> 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

        <script type="text/javascript">
        $(document).ready(function(){

            var mnth = $('#mnth :selected').val();
            var yr = $('#yr :selected').val();
            var dataString = "mnth=" + mnth + "&yr=" + yr;
            $('#sbtn1').click(function(){

                $('#tbdy').html('');
                $.ajax({url: "In_Out",
                    datatype:'JSON',
                    data: dataString,
                    success: function(result){
                   var obj = JSON.parse(result);


                   for(i=0;i<obj.length;i++)
                       {
                     $('#tbdy').append('<tr> <td>'+(i+1)+'</td> </tr>');  
                       }

                }});
            });

        });
        </script>
</html>

0 个答案:

没有答案