Retornar dados da servlet para JSP e imprimi-los com JSTL

Boa tarde srs.

Estou passando por uma dificuldade com o desenvolvimento de uma aplicação web. E a minha primeira aplicação de verdade com Java web.
Bom vamos ao problema.

Tenho uma jsp que ao carregar por completo faço um requisição via ajax com jquery para um servlet, essa sevlet por sua vez chama um metdo da Dao que busca informções, popula um List e deveria voltar essel List paa a jsp para que eu pudesse montar uma estrutura html com JSTL.

Abaixo está o codigo que escrevi.


// mienu.jsp
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<% %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu</title>
	<link rel="stylesheet" href="css/menu.css" media="all"></link>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
	<link rel="stylesheet" href="js/slider/jquery.bxslider.css" media="all" />
	
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/slider/jquery.bxslider.js"></script>
	<script type="text/javascript" src="js/menu.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function() {
		  alert("");
		  $.ajax({
			  url: "http://localhost:8083/menu/ControllerProducts",
			  type: "GET",
		      statusCode: {
		      	500: function(responseText) {
		      		console.info("Code 500: "+responseText);
		      	},
		      	200: function(responseText) {
		      		console.info("Code 200: "+responseText);
		      	},
		      },
		      
			  sucess: function(data) {
				  alert("sucess");
				  console.info(data);
			  },
			  
			  complete: function(data) {
				  console.info("complete");
			  }
		  });
	});

	</script>
	
</head>
<body>
	<%@ page import="br.com.controller.snackbar.ControllerProducts"%>  
	<c:forEach var="product" items="${products}">
		<c:out value="${product.description}" />
	</c:forEach>
	
	<div id="header-menu">
			<h1 class="title">Menu</h1>
		</div>
		<div class="container">
			<div class="content">
				<ul id="menu">
					<li>
						<div class="box-drinks box-menu">
							<h1 class="title">Bebidas</h1>
							<ul id="drinks" class="list-driks itens-menu list-color">
								<li>1 Loren ipsum</li>
								<li>2 Loren ipsum</li>
								<li>3 Loren ipsum</li>
								<li>4 Loren ipsum</li>
								<li>5 Loren ipsum</li>
								<li>6 Loren ipsum</li>
								<li>7 Loren ipsum</li>
								<li>8 Loren ipsum</li>
							</ul>
						</div>
					</li>
					<li>
						<div class="box-snack box-menu">
							<h1 class="title">Lanches</h1>
							<ul id="snack" class="list-snack itens-menu list-color">
								<li>1 Loren ipsum</li>
								<li>2 Loren ipsum</li>
								<li>3 Loren ipsum</li>
								<li>4 Loren ipsum</li>
								<li>5 Loren ipsum</li>
								<li>6 Loren ipsum</li>
							</ul>
						</div>
					</li>

					<li>
						<div class="box-fruits box-menu">
							<h1 class="title">Frutas</h1>
							<ul id="fruits" class="list-fruits itens-menu list-color">
								<li>1 Loren ipsum</li>
								<li>2 Loren ipsum</li>
								<li>3 Loren ipsum</li>
								<li>4 Loren ipsum</li>
								<li>5 Loren ipsum</li>
								<li>6 Loren ipsum</li>
								<li>7 Loren ipsum</li>
								<li>8 Loren ipsum</li>
								<li>9 Loren ipsum</li>
								<li>10 Loren ipsum</li>
							</ul>
						</div>
					</li>
				</ul>

				<div class="box-buy left">
					<h1 class="list-buy-title">Lista</h1>
					<ul id="buy" class="list-buy list-color">
						<li class="menu"></li>
					</ul>
				</div>

				<div class="box-description right">
					<span class="description">
						<span class="title">Descrição do lanche</span>	
					</span>
					<div class="description"></div>
				</div>
				<br class="clear" />
			</div>
		</div>
	<div id="footer-menu"></div>			
</body>
</html>

package br.com.controller.snackbar;

import java.io.IOException;
import java.util.List;

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

import br.com.dao.snackbar.DaoProduct;
import br.com.model.snackbar.Products;


/**
 * Servlet implementation class ControllerProducts
 */
public class ControllerProducts extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ControllerProducts() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(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

	}
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		DaoProduct oProduct = new DaoProduct();
		
		List<Products> products = oProduct.findAll();
		
		//System.out.print(products.getClass());
		
		request.setAttribute("products", products);
		RequestDispatcher view = request.getRequestDispatcher("menu.jsp"); 
		view.forward(request, response);
	}

	/**
	 * @see HttpServlet#doOptions(HttpServletRequest, HttpServletResponse)
	 */
	protected void doOptions(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

}

Dentro da função ajax do jquery, aqueles alerts e console.info, são executados. O que não é executado é essa parte

	<c:forEach var="product" items="${products}">
		<c:out value="${product.description}" />
	</c:forEach>

A pagina fica em branco. A minha intenção e montar uma lista nao ordenada com os dados que estão vindo do ArrayList.

Se alguem tiver uma dica de como fazer isso, ou se essa tatica não e a melhor. Por favor so nao indiquem framwoks, por enquanto quero aprender bem fazer tudo na mão e depois verei isso.

Obrigado

quando vc usa ajax os dados que vc quer retorna deve ser colocados no response, e no response não da pra colocar objetos apenas string.

sendo assim sua requisição ajax deve retorna os dados ou como xml ou json ou um html com o que vc precisa exibir

Boa tarde DaniloAndrade .

Você poderia me dar um exemplo de como fazer isso.

Acho q entendi, minha função ajax faz um requisição do tipo get com o dataTyp = “json” certo ??

Essa requisição será processada pelo metodo doGet da minha servlet certo ?

Dai eu vi um exemplo em q o cara usa uma library chamada Gson.

Vou tentar fazer isso, quando conseguir posto o codigo. Você tem alguma dica de como fazer isso de uma melhor forma ??

Muito Obrigado.

é isso mesmo que vc falou agora.

e tem varias libs que vc pode usar.

ai no seu jsp vc tera que criar o dom manualmente usado jquery ou uma outro famework js.

não tem muito segredo

da uma olhada nesse topico
http://www.guj.com.br/java/247900-carregar-uma-table-com-campos-com-jsonresolvido

ele ta usando vraptor mas na parte da view é o mesmo que vc vai precisar fazer

Meu codigo fico assim agora

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		DaoProduct objProduct = new DaoProduct();
		
		
		List<Products> products = objProduct.findAll();
		
		String json = null;
		json = new Gson().toJson(products);
		response.setContentType("application/json");
		response.setCharacterEncoding("UTF-8");
	    response.getWriter().write(json); 
		
	     /*
		request.setAttribute("products", products);
		RequestDispatcher view = request.getRequestDispatcher("menu.jsp"); 
		view.forward(request, response);
		*/
	}

	<script type="text/javascript">
	$(document).ready(function() {
	  $.ajax({
		  url: "http://localhost:8083/menu/ControllerProducts",
		  type: "GET",
		  dataType: "json",
		  statusCode: {
	      	500: function() {
	      		console.info("Code 500: ");
	      	},
	      },
	      
		  sucess: function(json) {
			console.info(jjon);
		  },
		  
		  complete: function(json) {
			  console.info("complete");
			  $.each(json, function(key, value){
	      		console.info(key+" "+value);
      		  });
		  }
	  });
	});

	</script>

Mas no complete do ajax nao vem o List que eu preciso. Desculpa enche o saco :). Se eu conseguir pegar o List, creio que é for montar um each e montar o html que preciso.