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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • index.jsp
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

Output
Before:

After:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.