Pequeña prueba con jsp y servlet que no funciona

thehiphapper · 5 Septiembre 2016, 04:46 AM

Estoy aprendiendo a usar servlet y simplemente quería desde un jsp (index.jsp), pulsando un boton, el servlet me devuelva "Boton pulsado" impreso en un div del index.jsp, pero quería hacerlo con jquery para que no se recargue la página, de momento llevo lo siguiente:

Index.jsp:

Código [Seleccionar]

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="scripts/jquery-3.0.0.min.js">

</script>
<script>
 $(document).ready(function() {
  $('#submit').click(function(event) {
   
   $.post('ActionServlet', {
    
   }, function(responseText) {
    $('#tabla').html(responseText);
   });
  });
 });
</script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <form id="form1">
            <input type="button" id="submit" value="Pulsame" />
        </form>
        <br>
        <div id="tabla"></div>
        
        
        
    </body>
</html>

Servlet:

Código [Seleccionar]

package MiPackage;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author user
 */
public class MiServlet extends HttpServlet {

    /**
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code>
     * methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
       
    }

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /**
     * Handles the HTTP <code>GET</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Handles the HTTP <code>POST</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        
        response.setContentType( "text/html; charset=iso-8859-1" );
  PrintWriter out = response.getWriter();
        out.println("<p>Boton pulsado<p>");
        
        
    }

    /**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

web.xml (aquí no toqué nada, según se generó, así lo he dejado)

Código [Seleccionar]

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <servlet>
        <servlet-name>MiServlet</servlet-name>
        <servlet-class>MiPackage.MiServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>MiServlet</servlet-name>
        <url-pattern>/MiServlet</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
</web-app>

El problema es que cuando pulso el boton no hace nada, miro en la consola web de firefox y cada vez que pulso me da el siguiente error:

POST XHR http://localhost:8080/ajaxjsp2/ActionServlet [HTTP/1.1 404 Not Found 0ms]

¿donde estoy metiendo la pata?Gracias.

Zeros1001 · 5 Septiembre 2016, 12:01 PM

Tienes que llamar desde Jquery a tu servlet (el mismo nombre del servlet), de todas formas, ahí no estás usando Ajax, y si no usas Ajax la página se recargará y tú no quieres eso, no?

Saludos!

thehiphapper · 5 Septiembre 2016, 13:18 PM

Cita de: Zeros1001 en 5 Septiembre 2016, 12:01 PM
Tienes que llamar desde Jquery a tu servlet (el mismo nombre del servlet), de todas formas, ahí no estás usando Ajax, y si no usas Ajax la página se recargará y tú no quieres eso, no?

Saludos!

Muchas gracias, efectivamente me había colado con el nombre del servlet. No quiero que se recargue la página, ahora funciona y parece que no se recarga o por lo menos da esa sensación, siempre he pensado que jquery evitaba que se recargase la página, ¿como se debería hacer correctamente?Muchas gracias.

Zeros1001 · 6 Septiembre 2016, 08:30 AM

Tienes razón, se podría hacer así como lo haces, pero lo más común es utilizar Ajax, te dejo un ejemplo sencillo con JSP para que le eches un vistazo:

http://jarroba.com/ajax-con-jsp-y-servelts/

Ajax se utiliza para enviar formularios al servidor y obtener las respuestas sin recargar la página, y se suele utilizar Jquery para ayudar a Ajax a seleccionar los elementos o agregarle datos.

Espero que te haya servido de ayuda.

Saludos!!

Jeferi · 7 Septiembre 2016, 16:25 PM

La petición AJAX la está realizando adecuadamente.

Fíjate en el mensaje del error: HTTP 404 Not Found

Cita de: thehiphapper en 5 Septiembre 2016, 04:46 AM
POST XHR http://localhost:8080/ajaxjsp2/ActionServlet [HTTP/1.1 404 Not Found 0ms]

El código del Servlet lo veo bien. El de jQuery, también a excepción de una línea.

El problema es que intentas realizar la petición contra el servlet ActionServlet el cual no existe.
Si nos fijamos en el Servlet el nombre para éste es: MiServlet
Además, en el web.xml, estás mapeando el servlet MiServlet en la ruta /MiServlet, así que la ruta correcta en la petición de jQuery sería /MiServlet

Te reescribo el código javascript y ves la diferencia:

Código (javascript) [Seleccionar]

<script>
 $(document).ready(function() {
  $('#submit').click(function(event) {
   
   // $.post('ActionServlet', { -- Esta línea no
   $.post('MiServlet', { // -- sería así
    
   }, function(responseText) {
    $('#tabla').html(responseText);
   });
  });
 });
</script>

thehiphapper · 8 Septiembre 2016, 04:06 AM

Gracias, despues de unos dias haciendo pruebas, creo que lo domino

Test Foro de elhacker.net SMF 2.1

Pequeña prueba con jsp y servlet que no funciona

thehiphapper

Zeros1001

thehiphapper

Zeros1001

Jeferi

thehiphapper