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
=
</
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: