How to display search result of another page on same page using ajax in JSP?

Last Updated : 12 Jul, 2025

In this example, we are creating a search bar to display the result on the same page in using ajax in JSP. AJAX stands for Asynchronous JavaScript and XML. Where Ajax is mainly used for Displaying another web page content on the same web page without refreshment of the page. You can read more about ajax technology here. Approach: We use the JQuery ready function in order to make sure that our JavaScript does not execute until the page has loaded. Inside the ready function, we perform a simple use click event with id="#sub" it is the id of the submit bottom on which the action should be performed.

javascript

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

In the above code, the

$("user_input").value(): Takes the input values from text field where user_input is the id.
$.post("SearchResult.jsp", {n3:fn}, function(data){}): In this case fn value is been pass as argument into index.jsp page which search result from database and display on the same page.fn value can be obtain in index.jsp by using request.getParameter("n3").
$("#msg").html(data): msg is the id of the div tag means, it will display the result only inside the div tag.

Example:

index.html

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>

index.jsp

html

<html>

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

</html>

Output Before:

After:

Introduction to JavaScript

rahulroy3

Improve

Article Tags :

How to display search result of another page on same page using ajax in JSP?

Similar Reads

JavaScript Basics

JS Variables & Datatypes

JS Operators

JS Statements

JS Loops

JS Perfomance & Debugging

JS Object

JS Function

JS Array

Thank You!

What kind of Experience do you want to share?