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

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.

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

<!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> 

<body> 

    <center> 

        <%      

         String uname=request.getParameter("n3"); 

         out.println("Welcome "+uname); 

         %> 

    </center> 

</body> 

</html>

Output
Before:

After:

Article Tags :

HTML

JavaScript

JQuery

Web Technologies

Java-JSP