如何从通过ajax调用通过servlet请求接收的JSON对象中获取数据？

时间：2015-10-15 09:13:17

标签： javascript jquery json ajax servlets

我正在j2ee中开发一个Event Management应用程序。在此我需要显示用户事件列表及其相应的场地位置和日期。我使用jquery ajax调用传递数据并从servlet中检索json对象。我能够让json和它在console.log中完美地打印出来。 但是当我试图使用这些值来形成列表时，它会向我显示某些值的NaN并为某些值打印值。 我无法弄清楚实际问题在哪里。这是代码。请帮帮我。

<%@ 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">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ page import="com.amgen.anemiahub.bean.*" %>
<%@ page import="org.hibernate.*" %>
<%@ page import="org.hibernate.SessionFactory" %>
<%@ page import="org.hibernate.Session" %>
<%@ page import="com.amgen.anemiahub.util.HibernateUtil" %>
<%@ page import="java.util.*" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Anemia Hub Events </title>
<style type="text/css">
.events{
    width:600px;
    height:auto;
    background-color:whitesmoke;
    padding:5px;
    border-bottom:5px solid white;
}
</style>

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

    var year=$('.years option:selected').text();
    var month=$('.months option:selected').text();
    var months=["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
    if(month!="Months" && year!="Years"){
        $('.currentMonth').html("<b>"+currentMonth+"</b>");
    }

    var filter;
    var servlet_url="${pageContext.request.contextPath}/EventFilterServlet";

    $(':radio').click(function(){
        filter=$('input[name="filter"]:checked').val();
        if(filter==="all"){
            $.ajax({
                type:"post",
                url:servlet_url,
                dataType:"json",
                data:{filter:filter},
                success:function(data){
                    var data=$.parseJSON(JSON.stringify(data));
                    $('.events_div').html('');
                    $.each(data,function(key,value){
                            console.log(value);
                            $('.events_div').append(
                            '<div class="events" >'+
                                '<h2>'+value["eventName"]+'</h2>'+
                                '<p><b>'+value["location"]+'</b></p>'+
                                '<h4>'+value["eventStartDate"]- value["eventEndDate"]+'</h4>'+
                                '<p>'+value["eventDescription"]+'</p>'+
                                '<input type="button" value="View Event" onclick="openPage(\''+value["eventId"]+'\')">'+
                                '<input type="button" value="Register" >'+  
                            '</div>'

                            );
                    });
                }   
            });
        }
    });

    $('.months').on('change',function(){
        var month=$('.months option:selected').val();
        filter=$('input[name="filter"]:checked').val();
        var currentMonth=$('.months option:selected').text()+" "+$('.years option:selected').text();
        $('.currentMonth').html("<b>"+currentMonth+"</b>");

        $.ajax({
                type:"post",
                url:servlet_url,
                dataType:"json",
                data:{filter:filter,month:month},
                cache:false,
                success:function(data){
                    $.each(data,function(key,value){
                        console.log(value['eventName']);
                    }); 
                },
                error:function(textStatus, errorThrown){
                console.log(errorThrown);
                }       
        });
    });
});

function openPage(eventId){
 window.location.href = "./displayevent.jsp?eventId="+eventId;
}

</script>
</head>
<body>
    <div class="top_ontainer" style="width:900px;height:800px;">
    <form action="${pageContext.request.contextPath}/EventFilterServlet" method="post">
        <span>Filter by:</span><div  style="display:inline;margin:10px;">
            <input type="radio" name="filter" value="all" >All
            <input type="radio" name="filter" value="month" >Month</div>
            <div class="datefilter" style="display:inline; ">
                <select class="months" name="month" >
                    <option selected>Months</option>
                    <option value="10" >Jan</option>
                    <option value="11">Feb</option>
                    <option value="12">Mar</option>
                    <option value="09">Apr</option>
                </select>
                <select class="years" name="year" >
                    <option selected >Years</option>
                    <option value=2014 >2014</option>
                    <option value=2013>2013</option>
                    <option value=2012>2012</option>
                    <option value=2011>2011</option>
                </select>
            </div>
    </form>


    <div class="events_div" style="width:80%;height:80%;">
    </div>

    </div>
</body>
</html>

Servlet控制器部分：

package com.amgen.anemiahub.bean;

import java.io.IOException;
import java.io.PrintWriter;
import java.io.StringWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.Transaction;

import com.amgen.anemiahub.util.HibernateUtil;
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.reflect.TypeToken;



/**
 * Servlet implementation class EventFilterServlet
 */
public class EventFilterServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public EventFilterServlet() {
        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
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String year=request.getParameter("year");
        String filter=request.getParameter("filter");
        String month=request.getParameter("month");
        SessionFactory factory=HibernateUtil.getSessionFactory();
        Session s=factory.openSession();
        Transaction tr=s.beginTransaction();

        List<Event> events=new ArrayList<Event>();
        if(filter.equals("all")){
            String query="FROM Event";
            events=s.createQuery(query).list();
        }
        else if(filter.equals("month")){

            String query="FROM Event e WHERE e.eventStartDate LIKE :pattern or e.eventEndDate LIKE :pattern";
            events=s.createQuery(query).setString("pattern","%-"+month.trim()+"-%").list();
        }

        Gson gson=new Gson();
        JsonElement element = gson.toJsonTree(events, new TypeToken<List<Event>>() {}.getType());
        JsonArray jsonArray = element.getAsJsonArray();
        System.out.println("json"+jsonArray);
        response.setContentType("application/json");
        response.getWriter().print(jsonArray.toString());

    }

}

以下是我在javascript控制台中获得的内容：

Object { eventId: 1, eventName: "Event One", eventDescription: "first event", eventStartDate: "Oct 9, 2015 12:00:00 AM", eventEndDate: "Oct 10, 2015 12:00:00 AM", location: "Bangalore,India", totalRegistrations: Array[0], resource: Array[0], user: Array[0], category: Object } events.jsp:71:7
Object { eventId: 2, eventName: "event two", eventDescription: "second event description", eventStartDate: "Oct 9, 2015 12:00:00 AM", eventEndDate: "Oct 11, 2015 12:00:00 AM", location: "Chennai,India", totalRegistrations: Array[0], resource: Array[0], user: Array[0], category: Object } events.jsp:71:7
Object { eventId: 3, eventName: "Event third", eventDescription: "3rd event description sdfsfsfswtwef…", eventStartDate: "Oct 9, 2015 12:00:00 AM", eventEndDate: "Nov 10, 2015 12:00:00 AM", location: "Chennai,India", totalRegistrations: Array[0], resource: Array[0], user: Array[0], category: Object } events.jsp:71:7
Object { eventId: 4, eventName: "event four", eventDescription: "4th event description sdfsfsfswtwef…", eventStartDate: "Oct 9, 2015 12:00:00 AM", eventEndDate: "Dec 13, 2015 12:00:00 AM", location: "Chennai,India", totalRegistrations: Array[0], resource: Array[0], user: Array[0], category: Object } events.jsp:71:7
Object { eventId: 5, eventName: "Fifth Event", eventDescription: "Fifth event: wo dropdown list and q…", eventStartDate: "Oct 25, 2015 12:00:00 AM", eventEndDate: "Nov 13, 2015 12:00:00 AM", location: "bangalore", totalRegistrations: Array[0], resource: Array[0], user: Array[0], category: Object } events.jsp:71:7
Object { eventId: 6, eventName: "Sixth Event", eventDescription: "Sixth event: wo dropdown list and q…", eventStartDate: "Nov 25, 2015 12:00:00 AM", eventEndDate: "Dec 13, 2015 12:00:00 AM", location: "bangalore", totalRegistrations: Array[0], resource: Array[0], user: Array[0], category: Object } events.jsp:71:7
Object { eventId: 7, eventName: "Seventh Event", eventDescription: "Seventh event: wo dropdown list and…", eventStartDate: "Sep 10, 2015 12:00:00 AM", eventEndDate: "Oct 29, 2015 12:00:00 AM", location: "bangalore", totalRegistrations: Array[0], resource: Array[0], user: Array[0], category: Object }

编辑：在上面的代码中，我可以从value ['eventDescription']获取值，但其他值在javascript控制台中以NaN形式出现。

0 个答案:

没有答案
相关问题
最新问题