¿Cómo mostrar el resultado de búsqueda de otra página en la misma página usando ajax en JSP?

En este ejemplo, estamos creando una barra de búsqueda para mostrar el resultado en la misma página al usar ajax en JSP. AJAX significa JavaScript asíncrono y XML. Donde Ajax se usa principalmente para mostrar el contenido de otra página web en la misma página web sin actualizar la página. Puede leer más sobre la tecnología ajax aquí .

Enfoque:
Usamos la función JQuery ready para asegurarnos de que nuestro JavaScript no se ejecute hasta que la página se haya cargado. Dentro de la función lista,
realizamos un evento de clic de uso simple con id="#sub" la identificación del fondo de envío en el que se debe realizar la acción.

var fn=$("#user_input").val();
$.post("SearchResult.jsp", {n3:fn}, function(data){    
$("#msg").html(data); 
});

En el código anterior, el

$(“user_input”).value(): toma los valores de entrada del campo de texto donde user_input es la identificación.
$.post(“SearchResult.jsp”, {n3:fn}, function(data){}): En este caso , el valor fn se pasa como argumento a la página index.jsp que busca el resultado de la base de datos y se muestra en la misma página . El valor fn se puede obtener en index.jsp usando request.getParameter("n3").
$(“#msg”).html(data): msg es el id de la etiqueta div significa que mostrará el resultado solo dentro de la etiqueta div.

Ejemplo:

índice.html

<!DOCTYPE html>
<html>
  
<head>
    <title>search result of another page on 
      same page using ajax in JSP</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
</head>
  
<body>
    <center>
        <div>
            <h1 style="color:green">
              GeeksforGeeks</h1>
            <h2>Enter Your Name</h2>
            <input placeholder="Search" 
                   type="text" 
                   id="user_input"/>
            
            <button type="Submit" id="sub">
              Search
          </button>
        </div>
    </center>
    
    <div class="box_1" id="msg">
        <script type="text/javascript" 
                src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js">
      </script>
        
        <script src="jquery-3.2.1.js"></script>
        <script>
            $(document).ready(function() {
                $("#sub").click(function() {
                    var fn = $("#user_input").val();
                    $.post("index.jsp", {
                        n3: fn
                    }, function(data) {
                        $("#msg").html(data);
                    });
  
                });
            });
        </script>
    </div>
</body>
  
</html>

índice.jsp

<html>
  
<body>
    <center>
        <%     
         String uname=request.getParameter("n3");
         out.println("Welcome "+uname);
         %>
    </center>
</body>
  
</html>

Salida
Antes:

Después:

Publicación traducida automáticamente

Artículo escrito por Rahulroy3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta