Ajax将参数从jsp传递到servlet

时间:2015-12-19 05:38:00

标签: ajax jsp servlets

我试图通过Ajax将jquery datepicker中捕获的日期从jsp传递给servlet。日期作为对象而不是值传递。

以下是jsp和servlet代码

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   
 <%@page import="java.util.*"%>
 <%@page import="java.io.*" %>
 <%@page import="Remote.*" %>
<!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">
<title>TAS Admin</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css">

<script src="js/jquery.min.js"></script> 
<script src="js/jquery-ui.min.js"></script> 
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.dataTables.min.js"></script>
<style type="text/css">

    #header-wrap {
        position: fixed;
        height: 92px;
        top:0;
        width: 100%;
        z-index: 100;
        background-color: #000099;
    }

    .bs-example{
        margin: 20px;
    }
    .form-group input
    {
    width:150px;
    }
    .details
    {
    margin-top: 100px;
    padding: 10px 0px 5px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    }
    .datedetails
    {
    margin-top: 10px;
    padding: 10px 0px 5px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    }
    .report
    {
    margin-top: 10px;
    padding: 5px 0px 5px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    }
    h1 {
    font-size: 0.875em;
}
#name {
    top: 20px;
    left: 30%;
    color: #FFFFFF;
    position: absolute;
    font-weight: lighter;
    font-size: x-large;
    text-shadow: 0 0 0.3em rgb(0, 0, 0);
}
</style>
</head>

<body>


<div class="datedetails">
<!-- <form action="JobHistory" method="post"> -->
<table border=0 cellspacing=1 cellpadding=3 align=center width=100% bgcolor=#EFEFEF style=border-radius:5px;>
        <col width=30%>
        <col width=30%>
        <col width=20%>
        <col width=20%>
    <tr>
        <td><center><b>From Date:</b> <input type="text" id="fromdate" name="fromdate" style="width:90px;"/></center></td>
        <td><center><b>To Date:</b> <input type="text" id="todate" name="todate" style="width:90px;" /></center></td>
        <td></td>
        <td><center><input type="submit" value="Go" style="width:50px;cursor:pointer;" onclick="fetchData()"/></center></td>
    </tr>
 </table>

<!-- </form>-->
</div>
<div class="bs-example">
<table class="dataTable" id="dataReport" >
 <thead>
            <tr>
                <th>Location No</th>
                <th>Public IP</th>
                <th>Gateway IP</th>
                <th>Purpose</th>
                <th>Submitted by</th>
                <th>Submitted Date</th>
            </tr>
</thead>
</table>
</div>
<script>

/*var fromdate=$('#fromdate').datepicker().val();
var todate = $('#todate').datepicker().val();*/

/*var todate=$("#todate").datepicker({
        onSelect: function(){
            var date = $(this).datepicker("getDate").val();
            document.getElementById("todate").value=date;
        }
        });*/

/*var fromdate=$("#fromdate").datepicker({
    onSelect: function(){
        var date = $(this).datepicker("getDate").val();
        document.getElementById("fromdate").value=date;
    }
    });*/

    var fromdate=$("#fromdate").datepicker({
        onSelect:function(dateText, inst) {  var frmdate= dateText; }
        });

    var todate= $("#todate").datepicker({
        onSelect:function(dateText, inst) { var tdate= dateText; }
        });


function fetchData(){

    var datastring='fromdate='+fromdate+'&todate='+todate; 
    $.ajax({
        type: "POST",
        data: datastring,
        url: "JobHistory",
        dataType: 'json',
        success: AjaxFetchDataSucceeded,
        error: AjaxFetchDataFailed

    });
}

function AjaxFetchDataSucceeded(result) {
    if (result != "[]") {
        //var dataTab = $.parseJSON(result);
        $("#dataReport").dataTable({
            "bProcessing": true,
            "aaData": result,
            //important  -- headers of the json
            "aoColumns": [{ "mDataProp": "locnid","sWidth" : "5%","bSortable" : true  }, 
                          { "mDataProp": "public_ip","sWidth" : "5%","bSortable" : true  },
                          { "mDataProp": "gate_ip","sWidth" : "5%","bSortable" : true  },
                          { "mDataProp": "comment","sWidth" : "10%","bSortable" : true  }, 
                          { "mDataProp": "userid","sWidth" : "5%","bSortable" : true  },
                          { "mDataProp": "job_date","sWidth" : "5%","bSortable" : true  },],
            "sPaginationType": "full_numbers",
            "aaSorting": [[0, "asc"]],
            "bJQueryUI": true,
            "bDestroy": true

        });
    }
}

function AjaxFetchDataFailed(result) {
    alert(result.status + ' ' + result.statusText);
}
</script>
</body>
</html>

History.java

package Remote;

    import java.io.IOException;
    import java.io.PrintWriter;
    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 java.util.*;
    import Remote.connection;
    import java.sql.*;
    import java.sql.Date;
    import java.util.HashMap;
    import com.google.gson.*;
    /**
     * Servlet implementation class JobHistory
     */
    @WebServlet("/JobHistory")
    public class JobHistory extends HttpServlet {
        private static final long serialVersionUID = 1L;

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

        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            response.getWriter().append("Served at: ").append(request.getContextPath());
        }

        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("application/json");  
            response.setCharacterEncoding("UTF-8");
            ArrayList<Report> report = new ArrayList<Report>();

            String frmdate=request.getParameter("fromdate");
            String todate=request.getParameter("todate");

            HttpSession session=request.getSession(false);
            String userid=(String)session.getAttribute("username");
            String user = (String) session.getAttribute("user");
            String zAdmin = (String) session.getAttribute("zAdmin");
            String tAdmin = (String) session.getAttribute("tAdmin");

            Connection con=null;
            PreparedStatement pstmt=null;
            PrintWriter out=response.getWriter();
            ResultSet rs=null;

            String mysql="";
            if(user.equals("Y"))
            {
                mysql="select locnid,public_ip,gate_ip,userid,comment from connections where job_date between "+frmdate+" and "+todate;
                //mysql="select locnid,public_ip,gate_ip,comment,userid,job_date from connections";
            }
            else if(zAdmin.equals("Y"))
            {
                mysql="select locnid,public_ip,gate_ip,comment,userid,job_date from connections where locnid in (select location from zmgr where empid=?) and job_date between "+frmdate+"and "+todate+
                       "union"+
                       "select locnid,public_ip,gate_ip,comment,userid,job_date from connections where userid=? and job_date between "+frmdate+" and "+todate;
            }
            else if(tAdmin.equals("Y"))
            {
                mysql="select locnid,public_ip,gate_ip,comment,userid,job_date from connections where userid=? and job_date between "+frmdate+" and "+todate;
            }

            try{
                con=new connection().getConnection();
                pstmt=con.prepareStatement(mysql);
                if(zAdmin.equals("Y")||tAdmin.equals("Y"))
                pstmt.setInt(1,Integer.parseInt(userid));
                rs=pstmt.executeQuery();
                int i=1;
                while(rs.next())
                {
                    report.add(new Report(rs.getString(1),rs.getString(2),rs.getString(3),rs.getString(4)!=null?rs.getString(4):" ",rs.getString(5)!=null?rs.getString(5):" ",rs.getString(6)));

                    //i++;
                }
                con.close();
                String json=new Gson().toJson(report);
                out.print(json);

            }
            catch(Exception ex)
            {
                try {
                    con.close();
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }

            }

        }

    }

从jsp发送到ajax的参数没有出现在&#34; fromdate&#34;并且&#34; todate&#34; servlet中的变量。 请告诉我代码的问题。

1 个答案:

答案 0 :(得分:0)

var datastring应该是json格式:

var datastring= {};
datastring.fromdate=fromdate;
datastring.todate=todate; 

这是因为“'fromdate ='+ fromdate +'&amp; todate ='+ todate”表示使用GET方法查询url的一部分。但是你使用的是POST方法。