Ajax将参数从jsp传递给servlet

时间:2021-12-17 11:49:34

I am trying to pass a date captured in jquery datepicker from jsp to servlet through Ajax. The date is being passed as an object instead of the value.

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

The following is the jsp and servlet code

以下是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();
                }

            }

        }

    }

The parameters which are sent from jsp through ajax are not appearing in "fromdate" and "todate" variables in the servlet. Please let me know the issue with the code.

从jsp发送到ajax的参数不会出现在servlet中的“fromdate”和“todate”变量中。请告诉我代码的问题。

1 个解决方案

#1


0  

var datastring should be in json format:

var datastring应该是json格式:

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

It is because "'fromdate='+fromdate+'&todate='+todate" means a part of url query by using GET method. But you are using a POST method.

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

#1


0  

var datastring should be in json format:

var datastring应该是json格式:

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

It is because "'fromdate='+fromdate+'&todate='+todate" means a part of url query by using GET method. But you are using a POST method.

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