我试图通过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中的变量。 请告诉我代码的问题。
答案 0 :(得分:0)
var datastring应该是json格式:
var datastring= {};
datastring.fromdate=fromdate;
datastring.todate=todate;
这是因为“'fromdate ='+ fromdate +'&amp; todate ='+ todate”表示使用GET方法查询url的一部分。但是你使用的是POST方法。